website refactor

apps/website/components/races/RaceCard.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React from 'react';
+import { Clock, MapPin, Users } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
+
+interface RaceCardProps {
+  id: string;
+  title: string;
+  leagueName: string;
+  trackName: string;
+  scheduledAt: string;
+  entrantCount: number;
+  status: SessionStatus;
+  onClick: (id: string) => void;
+}
+
+export function RaceCard({
+  id,
+  title,
+  leagueName,
+  trackName,
+  scheduledAt,
+  entrantCount,
+  status,
+  onClick,
+}: RaceCardProps) {
+  return (
+    <Box 
+      as="article"
+      onClick={() => onClick(id)}
+      bg="bg-surface-charcoal"
+      border
+      borderColor="border-outline-steel"
+      p={4}
+      hoverBorderColor="border-primary-accent"
+      transition
+      cursor="pointer"
+      position="relative"
+      overflow="hidden"
+      group
+    >
+      {/* Hover Glow */}
+      <Box 
+        position="absolute" 
+        inset="0" 
+        bg="bg-primary-accent" 
+        bgOpacity={0.05} 
+        opacity={0} 
+        groupHoverOpacity={1} 
+        transition 
+      />
+      
+      <Stack gap={4}>
+        <Stack direction="row" justifyContent="between" alignItems="start">
+          <Stack gap={1}>
+            <Text size="xs" color="text-gray-500" weight="bold" uppercase>
+              {leagueName}
+            </Text>
+            <Text size="lg" weight="bold" groupHoverTextColor="text-primary-accent">
+              {title}
+            </Text>
+          </Stack>
+          <SessionStatusBadge status={status} />
+        </Stack>
+
+        <Box display="grid" gridCols={2} gap={4}>
+          <Stack direction="row" alignItems="center" gap={2}>
+            <Icon icon={MapPin} size={3} color="#6b7280" />
+            <Text size="xs" color="text-gray-400">{trackName}</Text>
+          </Stack>
+          <Stack direction="row" alignItems="center" gap={2}>
+            <Icon icon={Clock} size={3} color="#6b7280" />
+            <Text size="xs" color="text-gray-400">{scheduledAt}</Text>
+          </Stack>
+        </Box>
+
+        <Stack direction="row" alignItems="center" gap={2} pt={2} borderTop borderColor="border-outline-steel" bgOpacity={0.5}>
+          <Icon icon={Users} size={3} color="#4ED4E0" />
+          <Text size="xs" color="text-gray-400">
+            <Text as="span" color="text-telemetry-aqua" weight="bold">{entrantCount}</Text> ENTRANTS
+          </Text>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}