71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { Icon } from "@iconify/react";
|
|
|
|
export default function DashboardStats() {
|
|
const statsData = [
|
|
{
|
|
type: "profile",
|
|
name: "test akun",
|
|
role: "admin-mabes",
|
|
todayPosts: 0,
|
|
weekPosts: 0,
|
|
icon: "mdi:account-tie",
|
|
},
|
|
{
|
|
label: "Total post",
|
|
value: 2363,
|
|
icon: "mdi:post-outline",
|
|
},
|
|
{
|
|
label: "Total views",
|
|
value: 80,
|
|
icon: "ic:baseline-star-rate",
|
|
},
|
|
{
|
|
label: "Total share",
|
|
value: 1,
|
|
icon: "mdi:share",
|
|
},
|
|
{
|
|
label: "Total comment",
|
|
value: 1,
|
|
icon: "mdi:comment-outline",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="p-4 flex flex-col lg:flex-row justify-between gap-4">
|
|
{statsData.map((item, index) => {
|
|
if (item.type === "profile") {
|
|
return (
|
|
<div key={index} className="bg-white w-full lg:w-[25%] shadow-md rounded-lg p-4 flex flex-col justify-between col-span-1 sm:col-span-2">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold">{item.name}</p>
|
|
<p className="text-sm text-gray-500">{item.role}</p>
|
|
</div>
|
|
<Icon icon={item.icon} className="text-[60px] text-black" />
|
|
</div>
|
|
<div className="mt-4 text-sm text-black space-y-1 flex flex-row gap-2">
|
|
<p>
|
|
<span className="text-black font-bold text-[18px]">{item.todayPosts} Post</span> Hari ini
|
|
</p>
|
|
<p>
|
|
<span className="text-black font-bold text-[18px]">{item.weekPosts} Post</span> Minggu ini
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div key={index} className="bg-white shadow-md rounded-lg p-4 flex flex-col w-full lg:w-[18%] items-center justify-center">
|
|
<Icon icon={item.icon} className="text-[45px] text-black mb-2" />
|
|
<p className="text-sm text-gray-500">{item.label}</p>
|
|
<p className="text-xl font-bold">{item.value}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|