67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useLeaderboardEvent } from '@/lib/hooks/use-leaderboard';
|
|
import { cn } from '@/lib/utils';
|
|
// import { Timer } from '../Timer';
|
|
import Podium from './podium/Podium';
|
|
import { useMemo } from 'react';
|
|
|
|
const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
|
|
|
|
export default function EventLeaderboard({ token, id }: { token: string; id: number }) {
|
|
const { data, isLoading } = useLeaderboardEvent({ token, id });
|
|
|
|
const scores = [data?.groups]
|
|
.flat()
|
|
.sort((a, b) => a!.rank - b!.rank)
|
|
.map((group, place) => ({
|
|
...group,
|
|
place
|
|
}));
|
|
|
|
return (
|
|
<section className="flex h-full w-full flex-col space-y-4 p-4">
|
|
{!isLoading && data && <Podium score={scores} />}
|
|
{/* <Timer targetDate={data && data.end_date} /> */}
|
|
<main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
|
|
<ul className="flex flex-col space-y-2">
|
|
{!isLoading &&
|
|
data?.groups.map((group, key) => (
|
|
<li key={key} className="flex justify-between space-x-2">
|
|
<div className="flex items-center space-x-4">
|
|
<span className={cn('font-semibold', SCORE_COLORS[group.rank - 1])}>
|
|
{group.rank}
|
|
</span>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
|
|
<span className="text-lg">{group.name}</span>
|
|
<span className="text-sm text-muted">
|
|
{group.players
|
|
?.map((p) => p.pseudo)
|
|
.sort((a, b) => a.localeCompare(b))
|
|
.join(', ')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">Essaies</span>
|
|
<span className="text-lg text-muted">
|
|
{group.players.reduce((a, b) => a + b.tries, 0)}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">Score</span>
|
|
<span className="text-lg text-muted">
|
|
{group.players.reduce((a, b) => a + b.score, 0)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</main>
|
|
</section>
|
|
);
|
|
}
|