60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
const AdminDashboard = () => {
|
||
|
|
return (
|
||
|
|
<div className="space-y-8">
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-bold text-slate-800">Admin Dashboard</h1>
|
||
|
|
<p className="text-slate-500">Review and manage content submissions</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* STAT CARDS */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
title: "Open Tasks",
|
||
|
|
value: 2,
|
||
|
|
color: "bg-yellow-500",
|
||
|
|
growth: "+3",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Closed Tasks",
|
||
|
|
value: 2,
|
||
|
|
color: "bg-green-600",
|
||
|
|
growth: "+5",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Total Submissions",
|
||
|
|
value: 4,
|
||
|
|
color: "bg-blue-600",
|
||
|
|
growth: "+12%",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Rejected",
|
||
|
|
value: 7,
|
||
|
|
color: "bg-red-600",
|
||
|
|
growth: "-1",
|
||
|
|
},
|
||
|
|
].map((card, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className="bg-white rounded-2xl shadow border p-6 flex justify-between items-center"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-slate-500">{card.title}</p>
|
||
|
|
<h2 className="text-3xl font-bold text-slate-800 mt-2">
|
||
|
|
{card.value}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-right">
|
||
|
|
<p className="text-sm text-green-600 font-medium">
|
||
|
|
{card.growth}
|
||
|
|
</p>
|
||
|
|
<div className={`w-10 h-10 rounded-xl mt-2 ${card.color}`} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|