website refactor

apps/website/components/races/LiveRaceItem.tsx

@@ -0,0 +1,43 @@
+
+
+import { ChevronRight, PlayCircle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
+
+interface LiveRaceItemProps {
+  track: string;
+  leagueName: string;
+  onClick?: () => void;
+}
+
+export function LiveRaceItem({ track, leagueName, onClick }: LiveRaceItemProps) {
+  return (
+    <Box
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      justifyContent="between"
+      p={4}
+      bg="bg-deep-graphite/80"
+      rounded="lg"
+      border
+      borderColor="border-performance-green/20"
+      cursor="pointer"
+      hoverBorderColor="performance-green/40"
+      transition
+    >
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box p={2} bg="bg-performance-green/20" rounded="lg">
+          <Icon icon={PlayCircle} size={5} color="rgb(16, 185, 129)" />
+        </Box>
+        <Box>
+          <Heading level={3}>{track}</Heading>
+          <Text size="sm" color="text-gray-400">{leagueName}</Text>
+        </Box>
+      </Box>
+      <Icon icon={ChevronRight} size={5} color="rgb(156, 163, 175)" />
+    </Box>
+  );
+}