130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import Image from "next/image";
|
|
|
|
interface Performer {
|
|
rank: number;
|
|
address: string;
|
|
points: string;
|
|
}
|
|
|
|
const mockPerformers: Performer[] = [
|
|
{ rank: 1, address: "0x8A...2291", points: "52k" },
|
|
{ rank: 2, address: "0x11...F92A", points: "48k" },
|
|
{ rank: 3, address: "0x9C...3310", points: "41k" },
|
|
{ rank: 4, address: "0x42...119A", points: "32k" },
|
|
{ rank: 5, address: "0x77...882B", points: "28k" },
|
|
];
|
|
|
|
export default function TopPerformers() {
|
|
const getRowStyle = (rank: number) => {
|
|
switch (rank) {
|
|
case 1:
|
|
return {
|
|
bg: "#fff5ef",
|
|
borderColor: "#ff6900",
|
|
rankColor: "#ff6900",
|
|
textColor: "#111827",
|
|
pointsSize: "text-body-large",
|
|
};
|
|
case 2:
|
|
return {
|
|
bg: "#fffbf5",
|
|
borderColor: "#ffb933",
|
|
rankColor: "#ffb933",
|
|
textColor: "#111827",
|
|
pointsSize: "text-body-large",
|
|
};
|
|
case 3:
|
|
return {
|
|
bg: "#f3f4f6",
|
|
borderColor: "#6b7280",
|
|
rankColor: "#6b7280",
|
|
textColor: "#111827",
|
|
pointsSize: "text-body-large",
|
|
};
|
|
default:
|
|
return {
|
|
bg: "transparent",
|
|
borderColor: "transparent",
|
|
rankColor: "#d1d5db",
|
|
textColor: "#9ca1af",
|
|
pointsSize: "text-body-small",
|
|
};
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 flex flex-col overflow-hidden h-full">
|
|
{/* Header */}
|
|
<div className="border-b border-[#f1f5f9] dark:border-gray-700 px-6 pt-8 pb-8">
|
|
<h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
|
|
Top Performers
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Performers List */}
|
|
<div className="flex-1 flex flex-col">
|
|
{mockPerformers.map((performer) => {
|
|
const style = getRowStyle(performer.rank);
|
|
const isTopThree = performer.rank <= 3;
|
|
const height = performer.rank <= 3 ? "h-[72px]" : "h-[68px]";
|
|
|
|
return (
|
|
<div
|
|
key={performer.rank}
|
|
className={`flex items-center justify-between px-6 ${height} border-l-4`}
|
|
style={{
|
|
backgroundColor: style.bg,
|
|
borderLeftColor: style.borderColor,
|
|
}}
|
|
>
|
|
{/* Left - Rank and Address */}
|
|
<div className="flex items-center gap-5">
|
|
{/* Rank Number */}
|
|
<span
|
|
className={`font-black italic leading-[133%] ${
|
|
isTopThree ? "text-2xl tracking-[0.07px]" : "text-lg tracking-[-0.44px]"
|
|
}`}
|
|
style={{ color: style.rankColor }}
|
|
>
|
|
{performer.rank}
|
|
</span>
|
|
|
|
{/* Address */}
|
|
<span
|
|
className="text-body-small font-bold font-jetbrains leading-[150%]"
|
|
style={{ color: style.textColor }}
|
|
>
|
|
{performer.address}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Right - Points */}
|
|
<span
|
|
className={`${style.pointsSize} font-bold leading-[150%]`}
|
|
style={{
|
|
color: isTopThree ? "#111827" : "#4b5563",
|
|
}}
|
|
>
|
|
{performer.points}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Footer - My Rank */}
|
|
<div className="border-t border-border-gray dark:border-gray-700 px-6 py-6 flex items-center justify-between">
|
|
<div className="flex items-center gap-1">
|
|
<Image src="/icon-chart.svg" alt="Chart" width={16} height={16} />
|
|
<span className="text-[10px] font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
|
MY RANK
|
|
</span>
|
|
</div>
|
|
<span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
|
|
2,450.00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|