website refactor

apps/website/ui/UpcomingRaceItem.tsx

@@ -0,0 +1,56 @@
+
+
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
+import { Text } from './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={3}
+      rounded="lg"
+    >
+      <Text color="text-white" weight="medium" block>
+        {track}
+      </Text>
+      <Text size="sm" color="text-gray-400" block>
+        {car}
+      </Text>
+      <Stack direction="row" align="center" gap={2} mt={1}>
+        <Text size="xs" color="text-gray-500">
+          {formattedDate}
+        </Text>
+        <Text size="xs" color="text-gray-500">
+          •
+        </Text>
+        <Text size="xs" color="text-gray-500">
+          {formattedTime}
+        </Text>
+      </Stack>
+      {isMyLeague && (
+        <Box mt={1}>
+          <Badge variant="success">
+            Your League
+          </Badge>
+        </Box>
+      )}
+    </Surface>
+  );
+}