umami/components/pages/reports/ReportList.js

69 lines
1.7 KiB
JavaScript
Raw Normal View History

2023-05-18 08:20:06 +02:00
import Link from 'next/link';
import { Button, Icons, Text, Icon } from 'react-basics';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import Funnel from 'assets/funnel.svg';
import Nodes from 'assets/nodes.svg';
import Lightbulb from 'assets/lightbulb.svg';
2023-05-20 18:02:08 +02:00
import styles from './ReportList.module.css';
2023-05-18 08:20:06 +02:00
const reports = [
{
title: 'Event data',
description: 'Query your event data.',
url: '/reports/event-data',
icon: <Nodes />,
},
{
title: 'Funnel',
description: 'Understand the conversion and drop-off rate of users.',
url: '/reports/funnel',
icon: <Funnel />,
},
{
title: 'Insights',
description: 'Explore your data by applying segments and filters.',
url: '/reports/insights',
icon: <Lightbulb />,
},
];
2023-05-20 18:02:08 +02:00
function ReportItem({ title, description, url, icon }) {
2023-05-18 08:20:06 +02:00
return (
<div className={styles.report}>
<div className={styles.title}>
<Icon size="lg">{icon}</Icon>
<Text>{title}</Text>
</div>
<div className={styles.description}>{description}</div>
<div className={styles.buttons}>
<Link href={url}>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>Create</Text>
</Button>
</Link>
</div>
</div>
);
}
2023-05-20 18:02:08 +02:00
export function ReportList() {
2023-05-18 08:20:06 +02:00
return (
<Page>
<PageHeader title="Reports" />
<div className={styles.reports}>
{reports.map(({ title, description, url, icon }) => {
return (
2023-05-20 18:02:08 +02:00
<ReportItem key={title} icon={icon} title={title} description={description} url={url} />
2023-05-18 08:20:06 +02:00
);
})}
</div>
</Page>
);
}
2023-05-20 18:02:08 +02:00
export default ReportList;