website refactor

apps/website/components/races/StandingsItem.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Badge } from '@/ui/Badge';
+import { Grid } from '@/ui/Grid';
+import { StatItem } from '@/ui/StatItem';
+
+interface StandingsItemProps {
+  leagueName: string;
+  position: number;
+  points: number;
+  wins: number;
+  racesCompleted: number;
+}
+
+export function StandingsItem({
+  leagueName,
+  position,
+  points,
+  wins,
+  racesCompleted,
+}: StandingsItemProps) {
+  return (
+    <Box
+      bg="bg-iron-gray/50"
+      rounded="lg"
+      border
+      borderColor="border-charcoal-outline"
+      p={4}
+    >
+      <Stack direction="row" align="center" justify="between" mb={3}>
+        <Heading level={4}>
+          {leagueName}
+        </Heading>
+        <Badge variant="primary">
+          P{position}
+        </Badge>
+      </Stack>
+      
+      <Grid cols={3} gap={4}>
+        <StatItem label="Points" value={points} align="center" />
+        <StatItem label="Wins" value={wins} align="center" />
+        <StatItem label="Races" value={racesCompleted} align="center" />
+      </Grid>
+    </Box>
+  );
+}