website refactor

apps/website/components/races/RaceCard.tsx

@@ -5,8 +5,9 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
 
 interface RaceCardProps {
@@ -19,9 +20,7 @@ interface RaceCardProps {
   strengthOfField?: number | null;
   onClick?: () => void;
   statusConfig: {
-    border: string;
-    bg: string;
-    color: string;
+    intent: 'primary' | 'success' | 'warning' | 'critical' | 'default' | 'secondary' | 'info' | 'danger';
     icon: LucideIcon | null;
     label: string;
   };
@@ -42,73 +41,40 @@ export function RaceCard({
 
   return (
     <Card
-      bg="bg-surface-charcoal"
-      rounded="xl"
-      border
-      borderColor="border-outline-steel"
-      p={4}
+      variant="dark"
       onClick={onClick}
-      cursor={onClick ? 'pointer' : 'default'}
-      hoverBorderColor="border-primary-accent"
-      transition
-      position="relative"
-      overflow="hidden"
-      group
     >
-      {/* Live indicator */}
-      {status === 'running' && (
-        <Stack
-          position="absolute"
-          top="0"
-          left="0"
-          right="0"
-          h="1"
-          bg="bg-success-green"
-          animate="pulse"
-        >{null}</Stack>
-      )}
-
       <Stack direction="row" align="start" gap={4}>
         {/* Time Column */}
-        <Stack textAlign="center" flexShrink={0} w="16">
-          <Text size="lg" weight="bold" color="text-white" block>
+        <Stack align="center" gap={1}>
+          <Text size="lg" weight="bold" variant="high">
             {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
           </Text>
-          <Text size="xs" color={statusConfig.color} block>
+          <Text size="xs" variant={statusConfig.intent === 'default' ? 'low' : (statusConfig.intent as any)}>
             {status === 'running' ? 'LIVE' : scheduledAtDate.toLocaleDateString()}
           </Text>
         </Stack>
 
-        {/* Divider */}
-        <Stack
-          w="px"
-          bg="border-outline-steel"
-          alignSelf="stretch"
-        >{null}</Stack>
-
         {/* Main Content */}
-        <Stack flex={1} minWidth="0">
+        <Stack gap={4} fullWidth>
           <Stack direction="row" align="start" justify="between" gap={4}>
-            <Stack minWidth="0">
+            <Stack>
               <Heading
                 level={3}
-                truncate
-                groupHoverTextColor="text-primary-accent"
-                transition
               >
                 {track}
               </Heading>
-              <Stack direction="row" align="center" gap={3} mt={1}>
+              <Stack direction="row" align="center" gap={3}>
                 <Stack direction="row" align="center" gap={1}>
-                  <Icon icon={Car} size={3.5} color="var(--text-gray-400)" />
-                  <Text size="sm" color="text-gray-400">
+                  <Icon icon={Car} size={3.5} intent="low" />
+                  <Text size="sm" variant="low">
                     {car}
                   </Text>
                 </Stack>
                 {strengthOfField && (
                   <Stack direction="row" align="center" gap={1}>
-                    <Icon icon={Zap} size={3.5} color="var(--warning-amber)" />
-                    <Text size="sm" color="text-gray-400">
+                    <Icon icon={Zap} size={3.5} intent="warning" />
+                    <Text size="sm" variant="low">
                       SOF {strengthOfField}
                     </Text>
                   </Stack>
@@ -117,39 +83,23 @@ export function RaceCard({
             </Stack>
 
             {/* Status Badge */}
-            <Stack
-              direction="row"
-              align="center"
-              gap={1.5}
-              px={2.5}
-              py={1}
-              rounded="full"
-              border
-              borderColor="border-outline-steel"
-              bg="bg-base-black"
-              bgOpacity={0.5}
-            >
-              {statusConfig.icon && (
-                <Icon icon={statusConfig.icon} size={3.5} color={statusConfig.color} />
-              )}
-              <Text size="xs" weight="medium" color={statusConfig.color}>
-                {statusConfig.label}
-              </Text>
-            </Stack>
+            <Badge variant={statusConfig.intent}>
+              {statusConfig.label}
+            </Badge>
           </Stack>
 
           {/* League Link */}
-          <Stack mt={3} pt={3} borderTop borderStyle="solid" borderColor="border-outline-steel">
+          <Stack>
             <Link
               href={routes.league.detail(leagueId ?? '')}
               onClick={(e) => e.stopPropagation()}
             >
               <Stack direction="row" align="center" gap={2}>
-                <Icon icon={Trophy} size={3.5} color="var(--primary-accent)" />
-                <Text size="sm" color="text-primary-accent">
+                <Icon icon={Trophy} size={3.5} intent="primary" />
+                <Text size="sm" variant="primary">
                   {leagueName}
                 </Text>
-                <Icon icon={ArrowRight} size={3} color="var(--primary-accent)" />
+                <Icon icon={ArrowRight} size={3} intent="primary" />
               </Stack>
             </Link>
           </Stack>
@@ -159,10 +109,7 @@ export function RaceCard({
         <Icon
           icon={ChevronRight}
           size={5}
-          color="var(--text-gray-500)"
-          groupHoverTextColor="text-primary-accent"
-          transition
-          flexShrink={0}
+          intent="low"
         />
       </Stack>
     </Card>