website refactor

apps/website/components/races/NextUpRacePanel.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+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 { Clock, MapPin, Car, ChevronRight } from 'lucide-react';
+import { Button } from '@/ui/Button';
+import Link from 'next/link';
+
+interface NextUpRacePanelProps {
+  race: any;
+  onRaceClick: (id: string) => void;
+}
+
+export function NextUpRacePanel({ race, onRaceClick }: NextUpRacePanelProps) {
+  if (!race) return null;
+
+  return (
+    <Stack gap={3}>
+      <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest" paddingX={1}>
+        Next Up
+      </Text>
+      
+      <Surface 
+        as={Link}
+        href={`/races/${race.id}`}
+        variant="precision" 
+        padding="lg"
+        onClick={(e: React.MouseEvent) => {
+          e.preventDefault();
+          onRaceClick(race.id);
+        }}
+        cursor="pointer"
+        hoverBg="rgba(255, 255, 255, 0.02)"
+        display="block"
+        style={{ textDecoration: 'none', color: 'inherit' }}
+      >
+        <Stack direction={{ base: 'col', md: 'row' }} justify="between" align={{ base: 'start', md: 'center' }} gap={6}>
+          <Stack gap={4} flex={1}>
+            <Stack gap={1}>
+              <Text size="xs" variant="primary" weight="bold" uppercase letterSpacing="widest">
+                {race.leagueName}
+              </Text>
+              <Text size="2xl" weight="bold">
+                {race.track}
+              </Text>
+            </Stack>
+
+            <Stack direction="row" gap={6} wrap>
+              <Stack direction="row" align="center" gap={2}>
+                <Icon icon={Clock} size={4} intent="low" />
+                <Text size="sm" weight="medium">{race.timeLabel}</Text>
+              </Stack>
+              <Stack direction="row" align="center" gap={2}>
+                <Icon icon={Car} size={4} intent="low" />
+                <Text size="sm" weight="medium">{race.car}</Text>
+              </Stack>
+            </Stack>
+          </Stack>
+
+          <Button 
+            variant="primary" 
+            onClick={(e) => {
+              e.stopPropagation();
+              onRaceClick(race.id);
+            }}
+            icon={<Icon icon={ChevronRight} size={4} />}
+          >
+            View Details
+          </Button>
+        </Stack>
+      </Surface>
+    </Stack>
+  );
+}