website refactor

apps/website/components/leaderboards/LeaderboardTable.tsx

@@ -0,0 +1,49 @@
+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>
+  );
+}