59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { CardReport } from '~/components/ui/card-report'
|
|
import { ChartPie } from '~/components/ui/chart'
|
|
|
|
import { HISTORY, REPORT } from './data'
|
|
export const DashboardPage = () => {
|
|
return (
|
|
<div className="relative">
|
|
<div className="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
|
|
{REPORT.map(({ title, amount, icon }, index) => (
|
|
<CardReport
|
|
key={index}
|
|
title={title}
|
|
amount={amount}
|
|
icon={icon}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
|
|
{HISTORY.map(({ title, amount, icon, counter }, index) => (
|
|
<CardReport
|
|
key={index}
|
|
title={title}
|
|
amount={amount}
|
|
icon={icon}
|
|
counter={counter}
|
|
/>
|
|
))}
|
|
<div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
|
|
<ChartPie />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="my-5 grid grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
|
|
<div className="sm:col-span-3">
|
|
<div className="h-30 w-full">
|
|
<div className="shadow-sm">
|
|
<img
|
|
src="/images/dummy-chart-1.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="sm:col-span-2 sm:col-start-4">
|
|
<div className="h-30 w-full">
|
|
<div className="shadow-sm">
|
|
<img
|
|
src="/images/dummy-chart-3.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|