53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { Card, CardContent } from "@workspace/ui/components/card";
|
|
import { Icon } from "@workspace/ui/composed/icon";
|
|
import type { GetUserTrafficStatsResponse } from "@workspace/ui/services/user/traffic";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Display } from "@/components/display";
|
|
|
|
interface TrafficStatsCardsProps {
|
|
stats: GetUserTrafficStatsResponse;
|
|
}
|
|
|
|
export default function TrafficStatsCards({ stats }: TrafficStatsCardsProps) {
|
|
const { t } = useTranslation("traffic");
|
|
|
|
const cards = [
|
|
{
|
|
title: t("totalTraffic", "Total Traffic"),
|
|
value: stats.total_traffic,
|
|
icon: "uil:chart-line",
|
|
color: "text-blue-500",
|
|
},
|
|
{
|
|
title: t("uploadTraffic", "Upload Traffic"),
|
|
value: stats.total_upload,
|
|
icon: "uil:upload",
|
|
color: "text-green-500",
|
|
},
|
|
{
|
|
title: t("downloadTraffic", "Download Traffic"),
|
|
value: stats.total_download,
|
|
icon: "uil:download",
|
|
color: "text-purple-500",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{cards.map((card) => (
|
|
<Card key={card.title}>
|
|
<CardContent className="flex items-center justify-between p-6">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-muted-foreground text-sm">{card.title}</span>
|
|
<span className="font-bold text-2xl">
|
|
<Display type="traffic" value={card.value} />
|
|
</span>
|
|
</div>
|
|
<Icon className={`size-10 ${card.color}`} icon={card.icon} />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|