website refactor

apps/website/components/races/RaceCard.tsx

@@ -1,12 +1,11 @@
 'use client';
 
 import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
+import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
 import { routes } from '@/lib/routing/RouteConfig';
 
@@ -42,12 +41,12 @@ export function RaceCard({
   const scheduledAtDate = new Date(scheduledAt);
 
   return (
-    <Surface
+    <Card
       bg="bg-surface-charcoal"
       rounded="xl"
       border
       borderColor="border-outline-steel"
-      padding={4}
+      p={4}
       onClick={onClick}
       cursor={onClick ? 'pointer' : 'default'}
       hoverBorderColor="border-primary-accent"
@@ -58,7 +57,7 @@ export function RaceCard({
     >
       {/* Live indicator */}
       {status === 'running' && (
-        <Box
+        <Stack
           position="absolute"
           top="0"
           left="0"
@@ -66,31 +65,31 @@ export function RaceCard({
           h="1"
           bg="bg-success-green"
           animate="pulse"
-        />
+        >{null}</Stack>
       )}
 
       <Stack direction="row" align="start" gap={4}>
         {/* Time Column */}
-        <Box textAlign="center" flexShrink={0} width="16">
+        <Stack textAlign="center" flexShrink={0} w="16">
           <Text size="lg" weight="bold" color="text-white" block>
             {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
           </Text>
           <Text size="xs" color={statusConfig.color} block>
             {status === 'running' ? 'LIVE' : scheduledAtDate.toLocaleDateString()}
           </Text>
-        </Box>
+        </Stack>
 
         {/* Divider */}
-        <Box
+        <Stack
           w="px"
           bg="border-outline-steel"
           alignSelf="stretch"
-        />
+        >{null}</Stack>
 
         {/* Main Content */}
-        <Box flex={1} minWidth="0">
+        <Stack flex={1} minWidth="0">
           <Stack direction="row" align="start" justify="between" gap={4}>
-            <Box minWidth="0">
+            <Stack minWidth="0">
               <Heading
                 level={3}
                 truncate
@@ -115,12 +114,12 @@ export function RaceCard({
                   </Stack>
                 )}
               </Stack>
-            </Box>
+            </Stack>
 
             {/* Status Badge */}
-            <Box
-              display="flex"
-              alignItems="center"
+            <Stack
+              direction="row"
+              align="center"
               gap={1.5}
               px={2.5}
               py={1}
@@ -136,11 +135,11 @@ export function RaceCard({
               <Text size="xs" weight="medium" color={statusConfig.color}>
                 {statusConfig.label}
               </Text>
-            </Box>
+            </Stack>
           </Stack>
 
           {/* League Link */}
-          <Box mt={3} pt={3} borderTop borderColor="border-outline-steel" borderOpacity={0.3}>
+          <Stack mt={3} pt={3} borderTop borderStyle="solid" borderColor="border-outline-steel">
             <Link
               href={routes.league.detail(leagueId ?? '')}
               onClick={(e) => e.stopPropagation()}
@@ -153,8 +152,8 @@ export function RaceCard({
                 <Icon icon={ArrowRight} size={3} color="var(--primary-accent)" />
               </Stack>
             </Link>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
 
         {/* Arrow */}
         <Icon
@@ -166,6 +165,6 @@ export function RaceCard({
           flexShrink={0}
         />
       </Stack>
-    </Surface>
+    </Card>
   );
 }