61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Group } from '@/ui/Group';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { RankingRow } from './RankingRow';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import { Trophy } from 'lucide-react';
|
|
|
|
interface Driver {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
rank: number;
|
|
nationality: string;
|
|
skillLevel: string;
|
|
racesCompleted: number;
|
|
rating: number;
|
|
wins: number;
|
|
medalBg?: string;
|
|
medalColor?: string;
|
|
}
|
|
|
|
interface RankingsTableProps {
|
|
drivers: Driver[];
|
|
onDriverClick?: (id: string) => void;
|
|
}
|
|
|
|
export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
|
|
if (drivers.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
title="No drivers found"
|
|
description="There are no drivers in the system yet"
|
|
icon={Trophy}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader className="text-center w-16">Rank</TableHeader>
|
|
<TableHeader>Driver</TableHeader>
|
|
<TableHeader className="text-center">Races</TableHeader>
|
|
<TableHeader className="text-center">Rating</TableHeader>
|
|
<TableHeader className="text-center">Wins</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{drivers.map((driver) => (
|
|
<RankingRow
|
|
key={driver.id}
|
|
{...driver}
|
|
onClick={() => onDriverClick?.(driver.id)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|