76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Award, Trophy } from "lucide-react";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
const styles = [
|
|
{
|
|
border: "border-yellow-500/50",
|
|
bg: "bg-yellow-500/5",
|
|
height: "h-48",
|
|
text: "text-yellow-600",
|
|
},
|
|
{
|
|
border: "border-zinc-400/50",
|
|
bg: "bg-zinc-400/5",
|
|
height: "h-36",
|
|
text: "text-zinc-500",
|
|
},
|
|
{
|
|
border: "border-amber-700/50",
|
|
bg: "bg-amber-700/5",
|
|
height: "h-32",
|
|
text: "text-amber-700",
|
|
},
|
|
];
|
|
|
|
interface TopDonateRow {
|
|
name: string;
|
|
amount: string | null;
|
|
image?: string;
|
|
}
|
|
|
|
export function Podium({ data }: { data: TopDonateRow[] }) {
|
|
// [1,2,3] -> [2,1,3]
|
|
const order = [data[1], data[0], data[2]].filter(Boolean);
|
|
|
|
return (
|
|
<div className="mt-6 flex items-end justify-center gap-4">
|
|
{order.map((donor, index) => {
|
|
const rank = index === 0 ? 1 : index === 1 ? 0 : 2;
|
|
const s = styles[rank];
|
|
const initial = donor.name?.charAt(0).toUpperCase() ?? "?";
|
|
|
|
return (
|
|
<div key={rank} className="relative flex flex-col items-center">
|
|
<div className="absolute -top-8 z-10">
|
|
{rank === 0 ? (
|
|
<Trophy size={28} className="text-yellow-500" />
|
|
) : (
|
|
<Award size={28} className={s.text} />
|
|
)}
|
|
</div>
|
|
<Card
|
|
className={`${s.border} ${s.bg} ${s.height} flex w-36 flex-col items-center justify-end pb-0 backdrop-blur-md`}
|
|
>
|
|
<CardContent className="flex flex-col items-center gap-2 p-4">
|
|
<Avatar className="size-10">
|
|
<AvatarImage src={donor.image} />
|
|
<AvatarFallback>{initial}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="w-full truncate text-center text-sm font-semibold">
|
|
{donor.name}
|
|
</span>
|
|
<span className={`text-lg font-bold ${s.text}`}>
|
|
{donor.amount}฿
|
|
</span>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|