113 lines
4.4 KiB
TypeScript
113 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import type { Locale } from '@/lib/locale';
|
|
|
|
interface LeaderboardEntry {
|
|
userId: number;
|
|
userName: string | null;
|
|
userEmail: string | null;
|
|
totalAmount: number;
|
|
orderCount: number;
|
|
}
|
|
|
|
interface LeaderboardProps {
|
|
data: LeaderboardEntry[];
|
|
dark?: boolean;
|
|
locale?: Locale;
|
|
}
|
|
|
|
const RANK_STYLES: Record<number, { light: string; dark: string }> = {
|
|
1: { light: 'bg-amber-100 text-amber-700', dark: 'bg-amber-500/20 text-amber-300' },
|
|
2: { light: 'bg-slate-200 text-slate-600', dark: 'bg-slate-500/20 text-slate-300' },
|
|
3: { light: 'bg-orange-100 text-orange-700', dark: 'bg-orange-500/20 text-orange-300' },
|
|
};
|
|
|
|
export default function Leaderboard({ data, dark, locale = 'zh' }: LeaderboardProps) {
|
|
const title = locale === 'en' ? 'Recharge Leaderboard (Top 10)' : '充值排行榜 (Top 10)';
|
|
const emptyText = locale === 'en' ? 'No data' : '暂无数据';
|
|
const userLabel = locale === 'en' ? 'User' : '用户';
|
|
const amountLabel = locale === 'en' ? 'Total Amount' : '累计金额';
|
|
const orderCountLabel = locale === 'en' ? 'Orders' : '订单数';
|
|
const currency = locale === 'en' ? '$' : '¥';
|
|
const thCls = `px-4 py-3 text-left text-xs font-medium uppercase ${dark ? 'text-slate-400' : 'text-gray-500'}`;
|
|
const tdCls = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-300' : 'text-slate-700'}`;
|
|
const tdMuted = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-400' : 'text-gray-500'}`;
|
|
|
|
if (data.length === 0) {
|
|
return (
|
|
<div
|
|
className={[
|
|
'rounded-xl border p-6',
|
|
dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm',
|
|
].join(' ')}
|
|
>
|
|
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>
|
|
{title}
|
|
</h3>
|
|
<p className={['text-center text-sm py-8', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>{emptyText}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={[
|
|
'rounded-xl border',
|
|
dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm',
|
|
].join(' ')}
|
|
>
|
|
<h3 className={['px-6 pt-5 pb-2 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>
|
|
{title}
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className={`min-w-full divide-y ${dark ? 'divide-slate-700' : 'divide-gray-200'}`}>
|
|
<thead className={dark ? 'bg-slate-800/50' : 'bg-gray-50'}>
|
|
<tr>
|
|
<th className={thCls}>#</th>
|
|
<th className={thCls}>{userLabel}</th>
|
|
<th className={thCls}>{amountLabel}</th>
|
|
<th className={thCls}>{orderCountLabel}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className={`divide-y ${dark ? 'divide-slate-700/60' : 'divide-gray-200'}`}>
|
|
{data.map((entry, i) => {
|
|
const rank = i + 1;
|
|
const rankStyle = RANK_STYLES[rank];
|
|
return (
|
|
<tr key={entry.userId} className={dark ? 'hover:bg-slate-700/40' : 'hover:bg-gray-50'}>
|
|
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
|
{rankStyle ? (
|
|
<span
|
|
className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${dark ? rankStyle.dark : rankStyle.light}`}
|
|
>
|
|
{rank}
|
|
</span>
|
|
) : (
|
|
<span className={dark ? 'text-slate-500' : 'text-gray-400'}>{rank}</span>
|
|
)}
|
|
</td>
|
|
<td className={tdCls}>
|
|
<div>{entry.userName || `#${entry.userId}`}</div>
|
|
{entry.userEmail && (
|
|
<div className={['text-xs', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>
|
|
{entry.userEmail}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td
|
|
className={`whitespace-nowrap px-4 py-3 text-sm font-medium ${dark ? 'text-slate-200' : 'text-slate-900'}`}
|
|
>
|
|
{currency}
|
|
{entry.totalAmount.toLocaleString()}
|
|
</td>
|
|
<td className={tdMuted}>{entry.orderCount}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|