website refactor

apps/website/components/teams/TeamStandingsPanel.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Table, TableBody, TableHead, TableHeader, TableRow, TableCell } from '@/ui/Table';
+
+interface Standing {
+  leagueId: string;
+  leagueName: string;
+  position: number;
+  points: number;
+  races: number;
+}
+
+interface TeamStandingsPanelProps {
+  standings: Standing[];
+}
+
+export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
+  return (
+    <Box border borderColor="outline-steel" bg="surface-charcoal/30">
+      <Box p={4} borderBottom borderColor="outline-steel">
+        <Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="widest">
+          Active Campaign Standings
+        </Text>
+      </Box>
+      
+      {standings.length > 0 ? (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>League</TableHeader>
+              <TableHeader textAlign="center">Pos</TableHeader>
+              <TableHeader textAlign="center">Races</TableHeader>
+              <TableHeader textAlign="right">Points</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {standings.map((s) => (
+              <TableRow key={s.leagueId}>
+                <TableCell>
+                  <Text weight="bold" size="sm" color="text-white">{s.leagueName}</Text>
+                </TableCell>
+                <TableCell textAlign="center">
+                  <Box 
+                    display="inline-flex" 
+                    center 
+                    w="6" 
+                    h="6" 
+                    bg={s.position <= 3 ? 'warning-amber/20' : 'base-black'} 
+                    border 
+                    borderColor={s.position <= 3 ? 'warning-amber/40' : 'outline-steel'}
+                  >
+                    <Text size="xs" weight="bold" color={s.position <= 3 ? 'warning-amber' : 'text-gray-400'}>
+                      {s.position}
+                    </Text>
+                  </Box>
+                </TableCell>
+                <TableCell textAlign="center">
+                  <Text size="xs" color="text-gray-500" font="mono">{s.races}</Text>
+                </TableCell>
+                <TableCell textAlign="right">
+                  <Text font="mono" weight="bold" color="telemetry-aqua">{s.points}</Text>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : (
+        <Box py={12} textAlign="center">
+          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
+            No active campaign telemetry
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}