50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { RankingRow } from './RankingRow';
|
|
import { LeaderboardTableShell } from './LeaderboardTableShell';
|
|
|
|
interface LeaderboardDriver {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
rank: number;
|
|
rankDelta?: number;
|
|
nationality: string;
|
|
skillLevel: string;
|
|
racesCompleted: number;
|
|
rating: number;
|
|
wins: number;
|
|
}
|
|
|
|
interface LeaderboardTableProps {
|
|
drivers: LeaderboardDriver[];
|
|
onDriverClick?: (id: string) => void;
|
|
}
|
|
|
|
export function LeaderboardTable({ drivers, onDriverClick }: LeaderboardTableProps) {
|
|
return (
|
|
<LeaderboardTableShell isEmpty={drivers.length === 0} emptyMessage="No drivers found">
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader w="32">Rank</TableHeader>
|
|
<TableHeader>Driver</TableHeader>
|
|
<TableHeader textAlign="center">Races</TableHeader>
|
|
<TableHeader textAlign="center">Rating</TableHeader>
|
|
<TableHeader textAlign="center">Wins</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{drivers.map((driver) => (
|
|
<RankingRow
|
|
key={driver.id}
|
|
{...driver}
|
|
onClick={() => onDriverClick?.(driver.id)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</LeaderboardTableShell>
|
|
);
|
|
}
|