website refactor

apps/website/components/races/RaceListRow.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { RaceRow } from '@/ui/RaceRow';
+import { RaceRowCell } from '@/ui/RaceRowCell';
+import { StatusBadge } from '@/ui/StatusBadge';
+import { Icon } from '@/ui/Icon';
+import { Clock, MapPin, Car as CarIcon } from 'lucide-react';
+import Link from 'next/link';
+
+interface RaceListRowProps {
+  race: {
+    id: string;
+    track: string;
+    car: string;
+    leagueName: string;
+    timeLabel: string;
+    status: string;
+    isLive: boolean;
+    isPast: boolean;
+  };
+  onClick: (id: string) => void;
+}
+
+export function RaceListRow({ race, onClick }: RaceListRowProps) {
+  const status = race.isLive ? 'live' : (race.isPast ? 'past' : 'upcoming');
+  const emphasis = race.isPast ? 'low' : 'medium';
+
+  return (
+    <RaceRow 
+      as={Link}
+      href={`/races/${race.id}`}
+      onClick={(e: React.MouseEvent) => {
+        e.preventDefault();
+        onClick(race.id);
+      }} 
+      status={status}
+      emphasis={emphasis}
+    >
+      <RaceRowCell width="5rem" align="center">
+        <Stack gap={0.5} align="center">
+          <Text size="sm" weight="bold" variant={race.isLive ? 'success' : 'high'}>
+            {race.timeLabel}
+          </Text>
+          {race.isLive && (
+            <Text size="xs" variant="success" weight="bold" uppercase>Live</Text>
+          )}
+        </Stack>
+      </RaceRowCell>
+
+      <RaceRowCell label="Track">
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={MapPin} size={3} intent="low" />
+          <Text size="sm" weight="medium" truncate>{race.track}</Text>
+        </Stack>
+      </RaceRowCell>
+
+      <RaceRowCell label="League" hideOnMobile>
+        <Text size="sm" variant="low" truncate>{race.leagueName}</Text>
+      </RaceRowCell>
+
+      <RaceRowCell label="Car" hideOnMobile>
+        <Stack direction="row" align="center" gap={2}>
+          <Icon icon={CarIcon} size={3} intent="low" />
+          <Text size="sm" variant="low" truncate>{race.car}</Text>
+        </Stack>
+      </RaceRowCell>
+
+      <RaceRowCell width="6rem" align="right">
+        <StatusBadge variant={getStatusVariant(race.status)}>
+          {race.status}
+        </StatusBadge>
+      </RaceRowCell>
+    </RaceRow>
+  );
+}
+
+function getStatusVariant(status: string): any {
+  switch (status.toLowerCase()) {
+    case 'running': return 'success';
+    case 'completed': return 'neutral';
+    case 'cancelled': return 'error';
+    case 'scheduled': return 'info';
+    default: return 'neutral';
+  }
+}