website refactor

2026-01-14 23:46:04 +01:00
parent c1a86348d7
commit 4a2d7d15a5
294 changed files with 5637 additions and 3418 deletions
--- a/apps/website/components/races/RaceListItem.tsx
+++ b/apps/website/components/races/RaceListItem.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import React from 'react';
+import { Calendar, Clock, Car, Trophy, Zap, ChevronRight, PlayCircle, CheckCircle2, XCircle } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface Race {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  sessionType: string;
+  leagueId?: string;
+  leagueName?: string;
+  strengthOfField?: number | null;
+}
+
+interface RaceListItemProps {
+  race: Race;
+  onClick: (id: string) => void;
+}
+
+export function RaceListItem({ race, onClick }: RaceListItemProps) {
+  const statusConfig = {
+    scheduled: {
+      icon: Clock,
+      color: '#3b82f6',
+      bg: 'rgba(59, 130, 246, 0.1)',
+      border: 'rgba(59, 130, 246, 0.3)',
+      label: 'Scheduled',
+    },
+    running: {
+      icon: PlayCircle,
+      color: '#10b981',
+      bg: 'rgba(16, 185, 129, 0.1)',
+      border: 'rgba(16, 185, 129, 0.3)',
+      label: 'LIVE',
+    },
+    completed: {
+      icon: CheckCircle2,
+      color: '#9ca3af',
+      bg: 'rgba(156, 163, 175, 0.1)',
+      border: 'rgba(156, 163, 175, 0.3)',
+      label: 'Completed',
+    },
+    cancelled: {
+      icon: XCircle,
+      color: '#ef4444',
+      bg: 'rgba(239, 68, 68, 0.1)',
+      border: 'rgba(239, 68, 68, 0.3)',
+      label: 'Cancelled',
+    },
+  };
+
+  const config = statusConfig[race.status];
+  const StatusIcon = config.icon;
+
+  const formatTime = (date: string) => {
+    return new Date(date).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <Surface
+      variant="muted"
+      rounded="xl"
+      border
+      padding={4}
+      style={{ 
+        cursor: 'pointer',
+        borderColor: config.border,
+        position: 'relative',
+        overflow: 'hidden'
+      }}
+      onClick={() => onClick(race.id)}
+    >
+      {race.status === 'running' && (
+        <Box style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '0.25rem', background: 'linear-gradient(to right, #10b981, rgba(16, 185, 129, 0.5), #10b981)' }} className="animate-pulse" />
+      )}
+
+      <Stack direction="row" align="center" gap={4}>
+        {/* Date Column */}
+        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: '5rem', textAlign: 'center' }}>
+          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>
+            {new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
+          </Text>
+          <Text size="2xl" weight="bold" color="text-white">
+            {new Date(race.scheduledAt).getDate()}
+          </Text>
+          <Text size="xs" color="text-gray-500">
+            {formatTime(race.scheduledAt)}
+          </Text>
+        </Box>
+
+        {/* Divider */}
+        <Box style={{ width: '1px', height: '4rem', backgroundColor: '#262626' }} />
+
+        {/* Main Content */}
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Text weight="semibold" color="text-white" block truncate>{race.track}</Text>
+          <Stack direction="row" align="center" gap={4} mt={1} wrap>
+            <Stack direction="row" align="center" gap={1.5}>
+              <Icon icon={Car} size={3.5} color="#9ca3af" />
+              <Text size="sm" color="text-gray-400">{race.car}</Text>
+            </Stack>
+            {race.strengthOfField && (
+              <Stack direction="row" align="center" gap={1.5}>
+                <Icon icon={Zap} size={3.5} color="#f59e0b" />
+                <Text size="sm" color="text-warning-amber">SOF {race.strengthOfField}</Text>
+              </Stack>
+            )}
+          </Stack>
+          {race.leagueName && (
+            <Box mt={2}>
+              <Link href={`/leagues/${race.leagueId}`} onClick={(e) => e.stopPropagation()}>
+                <Stack direction="row" align="center" gap={1.5}>
+                  <Icon icon={Trophy} size={3.5} color="#3b82f6" />
+                  <Text size="sm" color="text-primary-blue">{race.leagueName}</Text>
+                </Stack>
+              </Link>
+            </Box>
+          )}
+        </Box>
+
+        {/* Status Badge */}
+        <Surface variant="muted" rounded="full" border padding={1} style={{ backgroundColor: config.bg, borderColor: config.border, paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
+          <Stack direction="row" align="center" gap={1.5}>
+            <Icon icon={StatusIcon} size={3.5} color={config.color} />
+            <Text size="xs" weight="medium" style={{ color: config.color }}>{config.label}</Text>
+          </Stack>
+        </Surface>
+
+        <Icon icon={ChevronRight} size={5} color="#525252" />
+      </Stack>
+    </Surface>
+  );
+}