45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { RankingRow } from './RankingRow';
|
|
import { LeaderboardTableShell } from '@/ui/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) {
|
|
const columns = [
|
|
{ key: 'rank', label: 'Rank', width: '8rem' },
|
|
{ key: 'driver', label: 'Driver' },
|
|
{ key: 'races', label: 'Races', align: 'center' as const },
|
|
{ key: 'rating', label: 'Rating', align: 'center' as const },
|
|
{ key: 'wins', label: 'Wins', align: 'center' as const },
|
|
];
|
|
|
|
return (
|
|
<LeaderboardTableShell columns={columns}>
|
|
{drivers.map((driver) => (
|
|
<RankingRow
|
|
key={driver.id}
|
|
{...driver}
|
|
onClick={() => onDriverClick?.(driver.id)}
|
|
/>
|
|
))}
|
|
</LeaderboardTableShell>
|
|
);
|
|
}
|