website refactor

apps/website/components/leagues/ScheduleRaceCard.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Badge } from '@/ui/Badge';
+import { Grid } from '@/ui/Grid';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface Race {
+  id: string;
+  name: string;
+  track?: string;
+  car?: string;
+  scheduledAt: string;
+  status: string;
+  sessionType?: string;
+  isPast?: boolean;
+}
+
+interface ScheduleRaceCardProps {
+  race: Race;
+}
+
+export function ScheduleRaceCard({ race }: ScheduleRaceCardProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Box style={{ width: '0.75rem', height: '0.75rem', borderRadius: '9999px', backgroundColor: race.isPast ? '#10b981' : '#3b82f6' }} />
+          <Heading level={3} style={{ fontSize: '1.125rem' }}>{race.name}</Heading>
+          <Badge variant={race.status === 'completed' ? 'success' : 'primary'}>
+            {race.status === 'completed' ? 'Completed' : 'Scheduled'}
+          </Badge>
+        </Stack>
+
+        <Grid cols={4} gap={4}>
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Calendar} size={4} color="#9ca3af" />
+            <Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
+          </Stack>
+
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Clock} size={4} color="#9ca3af" />
+            <Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleTimeString()}</Text>
+          </Stack>
+
+          {race.track && (
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={MapPin} size={4} color="#9ca3af" />
+              <Text size="sm" color="text-gray-300" truncate>{race.track}</Text>
+            </Stack>
+          )}
+
+          {race.car && (
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Car} size={4} color="#9ca3af" />
+              <Text size="sm" color="text-gray-300" truncate>{race.car}</Text>
+            </Stack>
+          )}
+        </Grid>
+
+        {race.sessionType && (
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Trophy} size={4} color="#9ca3af" />
+            <Text size="sm" color="text-gray-400">{race.sessionType} Session</Text>
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  );
+}