website refactor

apps/website/components/races/RaceListItem.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { Badge } from '@/ui/Badge';
-import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
+import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
+import { Car, Trophy, Zap, ArrowRight } from 'lucide-react';
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
 
 interface RaceListItemProps {
   track: string;
@@ -41,103 +42,52 @@ export function RaceListItem({
   onClick,
   statusConfig,
 }: RaceListItemProps) {
-  const StatusIcon = statusConfig.icon;
+  const isLive = status === 'running';
 
   return (
-    <Stack
-      onClick={onClick}
-      position="relative"
-      overflow="hidden"
-      rounded="xl"
-      bg="bg-surface-charcoal"
-      border
-      borderColor="border-outline-steel"
-      p={4}
-      cursor="pointer"
-      transition
-      hoverScale
-      group
-    >
-      {/* Live indicator */}
-      {status === 'running' && (
-        <Stack 
-          position="absolute" 
-          top="0" 
-          left="0" 
-          right="0" 
-          h="1" 
-          bg="bg-success-green"
-          animate="pulse"
-        />
-      )}
+    <RaceCard onClick={onClick} isLive={isLive}>
+      <RaceTimeColumn
+        date={dateLabel}
+        time={dayLabel || timeLabel || ''}
+        relativeTime={relativeTimeLabel || timeLabel}
+        isLive={isLive}
+      />
 
-      <Stack direction="row" align="center" gap={4}>
-        {/* Time/Date Column */}
-        <Stack flexShrink={0} textAlign="center" width="16">
-          {dateLabel && (
-            <Text size="xs" color="text-gray-500" block uppercase>
-              {dateLabel}
-            </Text>
-          )}
-          <Text size={dayLabel ? "2xl" : "lg"} weight="bold" color="text-white" block>
-            {dayLabel || timeLabel}
-          </Text>
-          <Text size="xs" color={status === 'running' ? 'text-success-green' : 'text-gray-400'} block>
-            {status === 'running' ? 'LIVE' : relativeTimeLabel || timeLabel}
-          </Text>
-        </Stack>
+      <div style={{ width: '1px', height: '2.5rem', backgroundColor: 'var(--ui-color-border-muted)', opacity: 0.2 }} />
 
-        {/* Divider */}
-        <Stack w="px" h="10" alignSelf="stretch" bg="border-outline-steel" />
-
-        {/* Main Content */}
-        <Stack flexGrow={1} minWidth="0">
-          <Stack direction="row" align="start" justify="between" gap={4}>
-            <Stack minWidth="0">
-              <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={1}>
-                  <Icon icon={Car} size={3.5} color="var(--text-gray-400)" />
-                  <Text size="sm" color="text-gray-400">{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">SOF {strengthOfField}</Text>
-                  </Stack>
-                )}
-              </Stack>
-            </Stack>
-
-            {/* Status Badge */}
-            <Badge variant={statusConfig.variant}>
-              <Icon icon={StatusIcon} size={3.5} />
-              {statusConfig.label}
-            </Badge>
-          </Stack>
-
-          {/* League Link */}
-          {leagueName && leagueHref && (
-            <Stack mt={3} pt={3} borderTop borderColor="border-outline-steel" borderOpacity={0.3}>
+      <RaceInfo
+        title={track}
+        subtitle={car}
+        badge={
+          <Badge variant={statusConfig.variant}>
+            <Icon icon={statusConfig.icon} size={3.5} />
+            {statusConfig.label}
+          </Badge>
+        }
+        meta={
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            {strengthOfField && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                <Icon icon={Zap} size={3.5} intent="warning" />
+                <Text size="sm" variant="low">SOF {strengthOfField}</Text>
+              </div>
+            )}
+            {leagueName && leagueHref && (
               <Link
                 href={leagueHref}
                 onClick={(e) => e.stopPropagation()}
                 variant="primary"
-                size="sm"
               >
-                <Icon icon={Trophy} size={3.5} mr={2} color="var(--primary-accent)" />
-                <Text as="span" color="text-primary-accent">{leagueName}</Text>
-                <Icon icon={ArrowRight} size={3} ml={2} color="var(--primary-accent)" />
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                  <Icon icon={Trophy} size={3.5} intent="primary" />
+                  <Text size="sm" variant="primary">{leagueName}</Text>
+                  <Icon icon={ArrowRight} size={3} intent="primary" />
+                </div>
               </Link>
-            </Stack>
-          )}
-        </Stack>
-
-        {/* Arrow */}
-        <Icon icon={ChevronRight} size={5} color="var(--text-gray-500)" flexShrink={0} groupHoverTextColor="text-primary-accent" transition />
-      </Stack>
-    </Stack>
+            )}
+          </div>
+        }
+      />
+    </RaceCard>
   );
 }