45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import LeaderboardItem from './LeaderboardItem'
|
|
|
|
export default function LeaderboardList({ items = [], type }) {
|
|
const podium = items.slice(0, 3)
|
|
const rest = items.slice(3)
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{podium.length > 0 ? (
|
|
<section>
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-slate-400">Top 3</h2>
|
|
<span className="text-xs text-slate-500">Podium leaders</span>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
|
{podium.map((item) => (
|
|
<LeaderboardItem key={`${type}-${item.rank}`} item={item} type={type} highlight />
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
<section>
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-slate-400">Leaderboard</h2>
|
|
<span className="text-xs text-slate-500">{items.length} ranked entries</span>
|
|
</div>
|
|
|
|
{items.length === 0 ? (
|
|
<div className="rounded-3xl border border-white/10 bg-white/[0.03] px-6 py-10 text-sm text-slate-400">
|
|
No leaderboard entries available yet for this period.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{rest.map((item) => (
|
|
<LeaderboardItem key={`${type}-${item.rank}`} item={item} type={type} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|