website refactor

apps/website/components/leagues/LeagueSchedulePanel.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { MapPin, Clock } from 'lucide-react';
+
+interface RaceEvent {
+  id: string;
+  title: string;
+  trackName: string;
+  date: string;
+  time: string;
+  status: 'upcoming' | 'live' | 'completed';
+}
+
+interface LeagueSchedulePanelProps {
+  events: RaceEvent[];
+}
+
+export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
+  return (
+    <Box as="section">
+      <Stack gap={4}>
+        {events.map((event) => (
+          <Box 
+            as="article"
+            key={event.id}
+            display="flex"
+            alignItems="center"
+            gap={6}
+            p={4}
+            border
+            borderColor="zinc-800"
+            bg="zinc-900/50"
+            hoverBorderColor="zinc-700"
+            transition
+          >
+            <Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
+              <Text size="xs" weight="bold" color="text-zinc-500" uppercase>
+                {new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
+              </Text>
+              <Text size="2xl" weight="bold" color="text-white">
+                {new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
+              </Text>
+            </Box>
+
+            <Box flexGrow={1}>
+              <Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
+              <Stack direction="row" gap={4} mt={1}>
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box color="text-zinc-600"><MapPin size={14} /></Box>
+                  <Text size="sm" color="text-zinc-400">{event.trackName}</Text>
+                </Box>
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box color="text-zinc-600"><Clock size={14} /></Box>
+                  <Text size="sm" color="text-zinc-400">{event.time}</Text>
+                </Box>
+              </Stack>
+            </Box>
+
+            <Box display="flex" alignItems="center" gap={3}>
+              {event.status === 'live' && (
+                <Box display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
+                  <Box w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
+                  <Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
+                    Live
+                  </Text>
+                </Box>
+              )}
+              {event.status === 'upcoming' && (
+                <Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
+                  <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
+                    Upcoming
+                  </Text>
+                </Box>
+              )}
+              {event.status === 'completed' && (
+                <Box px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
+                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
+                    Results
+                  </Text>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}