119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
const formatPrice = (value: number) =>
|
|
new Intl.NumberFormat("fa-IR", {
|
|
style: "currency",
|
|
currency: "IRR",
|
|
}).format(value);
|
|
|
|
interface LeaderboardItem {
|
|
name: string;
|
|
subtitle?: string;
|
|
value: string;
|
|
avatar?: string;
|
|
}
|
|
|
|
interface Leaderboard2Props {
|
|
title?: string;
|
|
description?: string;
|
|
items?: LeaderboardItem[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultItems: LeaderboardItem[] = [
|
|
{
|
|
name: "سارا احمدی",
|
|
subtitle: "فروش حسابهای کلیدی",
|
|
value: formatPrice(48250),
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar2.jpg",
|
|
},
|
|
{
|
|
name: "مهدی رضایی",
|
|
subtitle: "فروش حسابهای کلیدی",
|
|
value: formatPrice(42100),
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar1.webp",
|
|
},
|
|
{
|
|
name: "نیلوفر کریمی",
|
|
subtitle: "حسابهای کلیدی",
|
|
value: formatPrice(38750),
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar4.webp",
|
|
},
|
|
{
|
|
name: "امیر حسینی",
|
|
subtitle: "فروش حسابهای کلیدی",
|
|
value: formatPrice(35200),
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar1.jpg",
|
|
},
|
|
{
|
|
name: "لیلا محمدی",
|
|
subtitle: "حسابهای کلیدی",
|
|
value: formatPrice(31800),
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar/avatar4.jpg",
|
|
},
|
|
];
|
|
|
|
const Leaderboard2 = ({
|
|
title = "برترین کارشناسان فروش",
|
|
description = "رتبهبندی بسته شدن معامله در این ماه",
|
|
items = defaultItems,
|
|
className,
|
|
}: Leaderboard2Props) => {
|
|
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="flex items-center gap-4">
|
|
<span className="w-6 text-center text-sm font-medium text-muted-foreground">
|
|
{formatNumber(index + 1)}
|
|
</span>
|
|
<Avatar className="size-10">
|
|
<AvatarImage
|
|
src={item.avatar}
|
|
alt={`تصویر ${item.name}`}
|
|
className="object-cover"
|
|
/>
|
|
<AvatarFallback>
|
|
{item.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{item.name}</p>
|
|
{item.subtitle && (
|
|
<p className="truncate text-sm text-muted-foreground">
|
|
{item.subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<span className="text-sm font-semibold">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { Leaderboard2 };
|