wip

apps/website/components/teams/TeamStandings.tsx

@@ -1,64 +1,90 @@
 'use client';
 
-import Card from '@/ui/Card';
+import { Card } from '@/ui/Card';
 import { useTeamStandings } from "@/lib/hooks/team";
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Badge } from '@/ui/Badge';
+import { Grid } from '@/ui/Grid';
+import { Surface } from '@/ui/Surface';
 
 interface TeamStandingsProps {
   teamId: string;
   leagues: string[];
 }
 
-export default function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
+export function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
   const { data: standings = [], isLoading: loading } = useTeamStandings(teamId, leagues);
 
   if (loading) {
     return (
       <Card>
-        <div className="text-center py-8 text-gray-400">Loading standings...</div>
+        <Box textAlign="center" py={8}>
+          <Text color="text-gray-400">Loading standings...</Text>
+        </Box>
       </Card>
     );
   }
 
   return (
     <Card>
-      <h3 className="text-xl font-semibold text-white mb-6">League Standings</h3>
+      <Box mb={6}>
+        <Heading level={2}>
+          League Standings
+        </Heading>
+      </Box>
       
-      <div className="space-y-4">
+      <Stack gap={4}>
         {standings.map((standing: any) => (
-          <div
+          <Surface
             key={standing.leagueId}
-            className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
+            variant="dark"
+            rounded="lg"
+            border
+            padding={4}
           >
-            <div className="flex items-center justify-between mb-3">
-              <h4 className="text-white font-medium">{standing.leagueName}</h4>
-              <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-semibold">
+            <Stack direction="row" align="center" justify="between" mb={3}>
+              <Heading level={4}>
+                {standing.leagueName}
+              </Heading>
+              <Badge variant="primary">
                 P{standing.position}
-              </span>
-            </div>
+              </Badge>
+            </Stack>
             
-            <div className="grid grid-cols-3 gap-4 text-center">
-              <div>
-                <div className="text-2xl font-bold text-white">{standing.points}</div>
-                <div className="text-xs text-gray-400">Points</div>
-              </div>
-              <div>
-                <div className="text-2xl font-bold text-white">{standing.wins}</div>
-                <div className="text-xs text-gray-400">Wins</div>
-              </div>
-              <div>
-                <div className="text-2xl font-bold text-white">{standing.racesCompleted}</div>
-                <div className="text-xs text-gray-400">Races</div>
-              </div>
-            </div>
-          </div>
+            <Grid cols={3} gap={4}>
+              <Box textAlign="center">
+                <Text size="2xl" weight="bold" color="text-white" block>
+                  {standing.points}
+                </Text>
+                <Text size="xs" color="text-gray-400">Points</Text>
+              </Box>
+              <Box textAlign="center">
+                <Text size="2xl" weight="bold" color="text-white" block>
+                  {standing.wins}
+                </Text>
+                <Text size="xs" color="text-gray-400">Wins</Text>
+              </Box>
+              <Box textAlign="center">
+                <Text size="2xl" weight="bold" color="text-white" block>
+                  {standing.racesCompleted}
+                </Text>
+                <Text size="xs" color="text-gray-400">Races</Text>
+              </Box>
+            </Grid>
+          </Surface>
         ))}
-      </div>
+      </Stack>
 
       {standings.length === 0 && (
-        <div className="text-center py-8 text-gray-400">
-          No standings available yet.
-        </div>
+        <Box textAlign="center" py={8}>
+          <Text color="text-gray-400">
+            No standings available yet.
+          </Text>
+        </Box>
       )}
     </Card>
   );
-}
+}