Added reports section.

components/pages/reports/ReportHeader.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { Flexbox, Icon, Text } from 'react-basics';
+import WebsiteSelect from 'components/input/WebsiteSelect';
+import PageHeader from 'components/layout/PageHeader';
+import DateFilter from 'components/input/DateFilter';
+import { parseDateRange } from 'lib/date';
+
+export default function ReportHeader({ title, icon }) {
+  const [websiteId, setWebsiteId] = useState();
+  const [dateRange, setDateRange] = useState({});
+  const { value, startDate, endDate } = dateRange;
+
+  const handleSelect = id => {
+    setWebsiteId(id);
+  };
+
+  const handleDateChange = value => setDateRange(parseDateRange(value));
+
+  const Title = () => {
+    return (
+      <>
+        <Icon size="xl">{icon}</Icon>
+        <Text>{title}</Text>
+      </>
+    );
+  };
+
+  return (
+    <PageHeader title={<Title />}>
+      <Flexbox gap={20}>
+        <DateFilter
+          value={value}
+          startDate={startDate}
+          endDate={endDate}
+          onChange={handleDateChange}
+          showAllTime
+        />
+        <WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
+      </Flexbox>
+    </PageHeader>
+  );
+}