website refactor

apps/website/components/teams/TeamLeaderboardPanel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { TeamLogo } from './TeamLogo';
+import { RankBadge } from '@/components/leaderboards/RankBadge';
+
+interface TeamLeaderboardPanelProps {
+  teams: Array<{
+    id: string;
+    name: string;
+    logoUrl?: string;
+    rating: number;
+    wins: number;
+    races: number;
+    memberCount: number;
+  }>;
+  onTeamClick: (id: string) => void;
+}
+
+export function TeamLeaderboardPanel({ teams, onTeamClick }: TeamLeaderboardPanelProps) {
+  return (
+    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+      <Table>
+        <TableHead className="bg-base-graphite/50">
+          <TableRow>
+            <TableHeader className="w-16 text-center">Rank</TableHeader>
+            <TableHeader>Team</TableHeader>
+            <TableHeader className="text-center">Rating</TableHeader>
+            <TableHeader className="text-center">Wins</TableHeader>
+            <TableHeader className="text-center">Races</TableHeader>
+            <TableHeader className="text-center">Members</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {teams.map((team, index) => (
+            <TableRow 
+              key={team.id} 
+              onClick={() => onTeamClick(team.id)} 
+              clickable
+              className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
+            >
+              <TableCell className="text-center">
+                <RankBadge rank={index + 1} />
+              </TableCell>
+              <TableCell>
+                <Stack direction="row" align="center" gap={3}>
+                  <Box w="8" h="8" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center overflow="hidden">
+                    <TeamLogo teamId={team.id} alt={team.name} />
+                  </Box>
+                  <Text weight="bold" size="sm" color="text-white" className="group-hover:text-primary-blue transition-colors">
+                    {team.name}
+                  </Text>
+                </Stack>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" weight="bold" color="text-primary-blue">{team.rating}</Text>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" color="text-gray-300">{team.wins}</Text>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" color="text-gray-300">{team.races}</Text>
+              </TableCell>
+              <TableCell className="text-center">
+                <Text font="mono" color="text-gray-400" size="xs">{team.memberCount}</Text>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}