website refactor

apps/website/components/races/RacesLiveRail.tsx

@@ -0,0 +1,80 @@
+'use thought';
+
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Zap, ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+interface RacesLiveRailProps {
+  liveRaces: any[];
+  onRaceClick: (id: string) => void;
+}
+
+export function RacesLiveRail({ liveRaces, onRaceClick }: RacesLiveRailProps) {
+  if (liveRaces.length === 0) return null;
+
+  return (
+    <Stack gap={3}>
+      <Stack direction="row" align="center" gap={2} paddingX={1}>
+        <Icon icon={Zap} size={3} intent="success" />
+        <Text size="xs" variant="success" weight="bold" uppercase letterSpacing="widest">
+          Live Now
+        </Text>
+      </Stack>
+      
+      <Box 
+        display="flex" 
+        gap={4} 
+        overflowX="auto" 
+        paddingBottom={2}
+        hideScrollbar
+      >
+        {liveRaces.map(race => (
+          <Surface 
+            key={race.id}
+            as={Link}
+            href={`/races/${race.id}`}
+            variant="precision"
+            padding="sm"
+            onClick={(e: React.MouseEvent) => {
+              e.preventDefault();
+              onRaceClick(race.id);
+            }}
+            cursor="pointer"
+            minWidth="280px"
+            position="relative"
+            hoverBg="rgba(255, 255, 255, 0.02)"
+            display="block"
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            <Box 
+              position="absolute" 
+              top={0} 
+              left={0} 
+              right={0} 
+              height="2px" 
+              bg="var(--ui-color-intent-success)" 
+            />
+            <Stack gap={2}>
+              <Text size="xs" variant="low" weight="bold" uppercase truncate>
+                {race.leagueName}
+              </Text>
+              <Text size="sm" weight="bold" truncate>
+                {race.track}
+              </Text>
+              <Stack direction="row" align="center" justify="between">
+                <Text size="xs" variant="success" weight="bold">
+                  {race.timeLabel}
+                </Text>
+                <Icon icon={ChevronRight} size={3} intent="low" />
+              </Stack>
+            </Stack>
+          </Surface>
+        ))}
+      </Box>
+    </Stack>
+  );
+}