79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
const formatStorage = (amount: number, unit = "گیگابایت") =>
|
|
`${formatNumber(amount)} ${unit}`;
|
|
|
|
interface StatsCard7Props {
|
|
title?: string;
|
|
value?: string;
|
|
percentage?: number;
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const StatsCard7 = ({
|
|
title = "فضای ذخیرهسازی مصرفشده",
|
|
value = formatStorage(75),
|
|
percentage = 75,
|
|
label = `از ${formatNumber(100)} گیگابایت کل`,
|
|
className,
|
|
}: StatsCard7Props) => {
|
|
const data = [
|
|
{ name: "used", value: percentage },
|
|
{ name: "remaining", value: 100 - percentage },
|
|
];
|
|
|
|
return (
|
|
<Card dir="rtl" lang="fa" className={cn("w-full max-w-xs", className)}>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative size-20">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={28}
|
|
outerRadius={38}
|
|
paddingAngle={0}
|
|
dataKey="value"
|
|
startAngle={90}
|
|
endAngle={-270}
|
|
strokeWidth={0}
|
|
>
|
|
<Cell fill="var(--chart-1)" />
|
|
<Cell fill="var(--muted)" />
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-sm font-semibold">
|
|
{formatNumber(percentage)}٪
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xl font-bold">{value}</div>
|
|
<div className="text-sm text-muted-foreground">{label}</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { StatsCard7 };
|