72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { GeneralLayout } from "~/components/general-layout"
|
|
import {
|
|
CloudIcon,
|
|
CloudDownloadIcon,
|
|
CloudUploadSolidIcon
|
|
} from "~/components/icons"
|
|
import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"
|
|
import { UsageCard } from "~/components/usage-card"
|
|
import { UsageChart } from "~/components/usage-chart"
|
|
|
|
export default function Dashboard() {
|
|
const isLogged = true
|
|
if (!isLogged) {
|
|
window.location.href = "/login"
|
|
}
|
|
|
|
return (
|
|
<GeneralLayout>
|
|
<h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
|
|
<UpgradeAccountBanner />
|
|
<h2 className="font-bold mb-8 mt-10 text-2xl">Current Usage</h2>
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<UsageCard
|
|
label="Storage"
|
|
currentUsage={120}
|
|
monthlyUsage={130}
|
|
icon={<CloudIcon className="text-ring" />}
|
|
/>
|
|
<UsageCard
|
|
label="Download"
|
|
currentUsage={2}
|
|
monthlyUsage={10}
|
|
icon={<CloudDownloadIcon className="text-ring" />}
|
|
/>
|
|
<UsageCard
|
|
label="Upload"
|
|
currentUsage={5}
|
|
monthlyUsage={15}
|
|
icon={<CloudUploadSolidIcon className="text-ring" />}
|
|
/>
|
|
</div>
|
|
<h2 className="font-bold mb-8 mt-10 text-2xl">Historical Usage</h2>
|
|
<div className="grid gap-8 grid-cols-2">
|
|
<UsageChart
|
|
dataset={[
|
|
{ x: "3/2", y: "50" },
|
|
{ x: "3/3", y: "10" },
|
|
{ x: "3/4", y: "20" }
|
|
]}
|
|
label="Storage"
|
|
/>
|
|
<UsageChart
|
|
dataset={[
|
|
{ x: "3/2", y: "50" },
|
|
{ x: "3/3", y: "10" },
|
|
{ x: "3/4", y: "20" }
|
|
]}
|
|
label="Download"
|
|
/>
|
|
<UsageChart
|
|
dataset={[
|
|
{ x: "3/2", y: "50" },
|
|
{ x: "3/3", y: "10" },
|
|
{ x: "3/4", y: "20" }
|
|
]}
|
|
label="Upload"
|
|
/>
|
|
</div>
|
|
</GeneralLayout>
|
|
)
|
|
}
|