website refactor

apps/website/components/leaderboards/LeaderboardTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { RankingRow } from './RankingRow';
+import { LeaderboardList } from '@/ui/LeaderboardList';
 import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
 
 interface LeaderboardDriver {
@@ -22,23 +22,17 @@ interface LeaderboardTableProps {
 }
 
 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>
+      <LeaderboardList>
+        {drivers.map((driver) => (
+          <RankingRow
+            key={driver.id}
+            {...driver}
+            onClick={() => onDriverClick?.(driver.id)}
+          />
+        ))}
+      </LeaderboardList>
     </LeaderboardTableShell>
   );
 }