website refactor

apps/website/components/races/UpcomingRaceItem.tsx

@@ -0,0 +1,61 @@
+
+
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface UpcomingRaceItemProps {
+  track: string;
+  car: string;
+  formattedDate: string;
+  formattedTime: string;
+  isMyLeague: boolean;
+}
+
+export function UpcomingRaceItem({
+  track,
+  car,
+  formattedDate,
+  formattedTime,
+  isMyLeague,
+}: UpcomingRaceItemProps) {
+  return (
+    <Surface
+      variant="muted"
+      padding={4}
+      rounded="none"
+      border
+      borderColor="border-gray/30"
+      className="hover:border-primary-accent/30 transition-colors bg-panel-gray/20 group"
+    >
+      <Stack direction="row" align="center" gap={4}>
+        <Box w="1" h="8" bg="primary-accent" opacity={0.3} className="group-hover:opacity-100 transition-opacity" />
+        <Box flexGrow={1}>
+          <Text color="text-white" weight="bold" block className="tracking-tight">
+            {track}
+          </Text>
+          <Text size="xs" color="text-gray-500" block weight="medium" className="uppercase tracking-widest mt-0.5">
+            {car}
+          </Text>
+        </Box>
+        <Stack align="end" gap={1}>
+          <Text size="xs" color="text-gray-400" font="mono" weight="bold">
+            {formattedDate}
+          </Text>
+          <Text size="xs" color="text-gray-600" font="mono">
+            {formattedTime}
+          </Text>
+        </Stack>
+      </Stack>
+      {isMyLeague && (
+        <Box mt={3} display="flex" justifyContent="end">
+          <Badge variant="success" size="xs">
+            YOUR LEAGUE
+          </Badge>
+        </Box>
+      )}
+    </Surface>
+  );
+}