mirror of
https://github.com/kremalicious/umami.git
synced 2024-09-27 11:48:48 +02:00
43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
|
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>
|
||
|
);
|
||
|
}
|