70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import { DecimalsArrowRight, MapPin } from "lucide-react";
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardContent,
|
|
CardFooter,
|
|
} from "../../components/ui/card";
|
|
import { Field, FieldLabel } from "../../components/ui/field";
|
|
import { Progress } from "../../components/ui/progress";
|
|
|
|
export const Analytics = () => {
|
|
return (
|
|
<main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4">
|
|
<h1 className="font-satoshi-bold text-3xl text-center tracking-tight">
|
|
Analytics
|
|
</h1>
|
|
<section className="flex w-full gap-3 justify-between">
|
|
<Card className="w-1/3 relative bg-linear-to-br from-purple-600 to-purple-700 rounded-4xl">
|
|
<div className="space-y-4">
|
|
<CardContent className="md:w-full space-y-4 flex flex-col items-center justify-center h-50">
|
|
<MapPin size={60} color="white" />
|
|
<h1 className="text-4xl font-satoshi-bold text-white flex">
|
|
<span>145</span> <span className="text-xl">th</span>
|
|
</h1>
|
|
</CardContent>
|
|
</div>
|
|
<div className="overflow-hidden opacity-0 -rotate-45 absolute -top-2 -right-30 ">
|
|
<DecimalsArrowRight size={380} color="white" />
|
|
</div>
|
|
</Card>
|
|
<Card
|
|
className="w-2/3 relative bg-linear-to-br from-gray-100 to-gray-300 rounded-4xl
|
|
flex-row"
|
|
>
|
|
<div className="space-y-4">
|
|
<CardHeader className="md:w-full">
|
|
<CardTitle className="font-satoshi-bold tracking-tight text-3xl ">
|
|
Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent className="md:w-full space-y-4"></CardContent>
|
|
<CardFooter className="flex justify-between"></CardFooter>
|
|
</div>
|
|
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-2 -right-30 ">
|
|
<DecimalsArrowRight size={380} color="white" />
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
<section>
|
|
<Card>
|
|
<CardContent>
|
|
<Field className="w-full max-w-sm">
|
|
<FieldLabel htmlFor="progress-upload">
|
|
<span className="font-satoshi text-xl">Score</span>
|
|
<span className="ml-auto font-satoshi">
|
|
<span className="text-5xl">854</span>
|
|
<span className="text-lg">/1600</span>
|
|
</span>
|
|
</FieldLabel>
|
|
<Progress value={55} id="progress-upload" max={100} />
|
|
</Field>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</main>
|
|
);
|
|
};
|