website refactor

apps/website/components/leaderboards/RankingsTable.tsx

@@ -30,7 +30,6 @@ export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
   if (drivers.length === 0) {
     return (
       <Stack py={16} align="center" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="xl">
-        <Text size="4xl" block mb={4}>🔍</Text>
         <Text color="text-gray-400" block mb={2}>No drivers found</Text>
         <Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
       </Stack>

apps/website/components/leaderboards/TeamLeaderboardTable.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TeamRankingRow } from './TeamRankingRow';
+import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
+
+interface LeaderboardTeam {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  position: number;
+  rating: number;
+  totalWins: number;
+  totalRaces: number;
+  memberCount: number;
+}
+
+interface TeamLeaderboardTableProps {
+  teams: LeaderboardTeam[];
+  onTeamClick?: (id: string) => void;
+}
+
+export function TeamLeaderboardTable({ teams, onTeamClick }: TeamLeaderboardTableProps) {
+  const columns = [
+    { key: 'rank', label: 'Rank', width: '8rem' },
+    { key: 'team', label: 'Team' },
+    { key: 'rating', label: 'Rating', align: 'center' as const },
+    { key: 'wins', label: 'Wins', align: 'center' as const },
+    { key: 'races', label: 'Races', align: 'center' as const },
+  ];
+
+  return (
+    <LeaderboardTableShell columns={columns}>
+      {teams.map((team) => (
+        <TeamRankingRow
+          key={team.id}
+          rank={team.position}
+          id={team.id}
+          name={team.name}
+          logoUrl={team.logoUrl}
+          rating={team.rating}
+          wins={team.totalWins}
+          races={team.totalRaces}
+          memberCount={team.memberCount}
+          onClick={() => onTeamClick?.(team.id)}
+        />
+      ))}
+    </LeaderboardTableShell>
+  );
+}