69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
interface LeaderboardItem {
|
|
name: string;
|
|
value: number;
|
|
maxValue?: number;
|
|
}
|
|
|
|
interface Leaderboard1Props {
|
|
title?: string;
|
|
description?: string;
|
|
items?: LeaderboardItem[];
|
|
valuePrefix?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const defaultItems: LeaderboardItem[] = [
|
|
{ name: "تهران", value: 4520 },
|
|
{ name: "اصفهان", value: 3210 },
|
|
{ name: "مشهد", value: 2890 },
|
|
{ name: "شیراز", value: 1890 },
|
|
{ name: "تبریز", value: 1240 },
|
|
];
|
|
|
|
const Leaderboard1 = ({
|
|
title = "شهرهای برتر در جذب سرنخ",
|
|
description = "سرنخهای واجد شرایط به تفکیک شهر در این ماه",
|
|
items = defaultItems,
|
|
valuePrefix = "",
|
|
className,
|
|
}: Leaderboard1Props) => {
|
|
const maxValue = items[0]?.value || 1;
|
|
|
|
return (
|
|
<Card dir="rtl" lang="fa" className={cn("w-full max-w-2xl", className)}>
|
|
<CardHeader>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{items.map((item, index) => (
|
|
<div key={index} className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="font-medium">{item.name}</span>
|
|
<span className="text-muted-foreground">
|
|
{valuePrefix}
|
|
{formatNumber(item.value)}
|
|
</span>
|
|
</div>
|
|
<Progress value={(item.value / maxValue) * 100} className="h-2" />
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { Leaderboard1 };
|