portal-dashboard/app/routes/dashboard.tsx

135 lines
4.9 KiB
TypeScript
Raw Normal View History

2024-03-12 20:22:54 +00:00
import { GeneralLayout } from "~/components/general-layout";
import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
import { UsageCard, UsageList } from "~/components/usage-card";
import { UsageChart } from "~/components/usage-chart";
2024-03-07 17:26:11 +00:00
export default function Dashboard() {
2024-03-12 20:22:54 +00:00
const isLogged = true;
if (!isLogged) {
window.location.href = "/login";
}
return (
<GeneralLayout>
<h1 className="font-bold mb-4 text-lg">Dashboard</h1>
<UpgradeAccountBanner />
<h2 className="font-bold mb-8 mt-10">Current Usage</h2>
<UsageList>
<UsageCard
usageName="Storage"
currentUsage={120}
monthlyUsage={130}
icon={<CloudIcon className="text-ring" />}
/>
<UsageCard
usageName="Download"
currentUsage={2}
monthlyUsage={10}
icon={<CloudDonwloadIcon className="text-ring" />}
/>
<UsageCard
usageName="Upload"
currentUsage={5}
monthlyUsage={15}
icon={<CloudUploadIcon className="text-ring" />}
/>
</UsageList>
<h2 className="font-bold mb-8 mt-10">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 },
]}
usageName="Storage"
/>
<UsageChart
dataset={[
{ x: "3/2", y: 50 },
{ x: "3/3", y: 10 },
{ x: "3/4", y: 20 },
]}
usageName="Download"
/>
<UsageChart
dataset={[
{ x: "3/2", y: 50 },
{ x: "3/3", y: 10 },
{ x: "3/4", y: 20 },
]}
usageName="Upload"
/>
</div>
</GeneralLayout>
);
2024-03-07 17:26:11 +00:00
}
2024-03-12 20:22:54 +00:00
const CloudIcon = ({ className }: { className?: string }) => {
return (
<svg
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g clipPath="url(#clip0_290_790)">
<path
d="M23.2503 12.7002C23.247 12.7002 23.2419 12.7019 23.2385 12.7019C23.5271 11.3418 23.4697 9.85681 22.739 8.27731C21.7046 6.04137 19.5868 4.37075 17.145 4.06025C13.7497 3.62825 10.7477 5.56381 9.55122 8.441C9.14791 8.28575 8.70916 8.19969 8.25016 8.19969C6.1796 8.19969 4.50054 9.87875 4.50054 11.9493C4.50054 12.2463 4.54272 12.5298 4.60854 12.8066C3.7091 12.5956 2.7236 12.6192 1.52885 13.5845C0.641224 14.3034 -0.0118379 15.3496 -2.54025e-05 16.4921C0.0235996 18.5441 1.69254 20.1995 3.7496 20.1995H23.0698C24.8231 20.1995 26.4768 19.0841 26.8869 17.3797C27.4826 14.9058 25.6247 12.7002 23.2503 12.7002Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_290_790">
<rect width="27" height="27" fill="currentColor" />
</clipPath>
</defs>
</svg>
);
};
const CloudDonwloadIcon = ({ className }: { className?: string }) => {
return (
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g clipPath="url(#clip0_290_792)">
<path
d="M18.9 7C18.2 3.6 15.2 1 11.5 1C8.6 1 6.1 2.6 4.9 5C1.8 5.4 -0.5 7.9 -0.5 11C-0.5 14.3 2.2 17 5.5 17H18.5C21.3 17 23.5 14.8 23.5 12C23.5 9.4 21.4 7.2 18.9 7ZM16.5 10L11.5 15L6.5 10H9.5V6H13.5V10H16.5Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_290_792">
<rect width="25" height="24" fill="currentColor" />
</clipPath>
</defs>
</svg>
);
};
const CloudUploadIcon = ({ className }: { className?: string }) => {
return (
<svg
width="24"
height="16"
viewBox="0 0 24 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<path
d="M19.4 6C18.7 2.6 15.7 0 12 0C9.1 0 6.6 1.6 5.4 4C2.3 4.4 0 6.9 0 10C0 13.3 2.7 16 6 16H19C21.8 16 24 13.8 24 11C24 8.4 21.9 6.2 19.4 6ZM14 9V13H10V9H7L12 4L17 9H14Z"
fill="currentColor"
/>
</svg>
);
};