website refactor

apps/website/components/dashboard/UpcomingRaces.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { Calendar } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface UpcomingRace {
+  id: string;
+  track: string;
+  car: string;
+  formattedDate: string;
+  formattedTime: string;
+  isMyLeague: boolean;
+}
+
+interface UpcomingRacesProps {
+  races: UpcomingRace[];
+  hasRaces: boolean;
+}
+
+export function UpcomingRaces({ races, hasRaces }: UpcomingRacesProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={3} icon={<Calendar style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />}>
+            Upcoming Races
+          </Heading>
+          <Box>
+            <Link href={routes.public.races} variant="primary">
+              <Text size="xs">View all</Text>
+            </Link>
+          </Box>
+        </Stack>
+        {hasRaces ? (
+          <Stack gap={3}>
+            {races.slice(0, 5).map((race) => (
+              <Box key={race.id} style={{ padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
+                <Text color="text-white" weight="medium" block>{race.track}</Text>
+                <Text size="sm" color="text-gray-400" block>{race.car}</Text>
+                <Stack direction="row" align="center" gap={2} mt={1}>
+                  <Text size="xs" color="text-gray-500">{race.formattedDate}</Text>
+                  <Text size="xs" color="text-gray-500">•</Text>
+                  <Text size="xs" color="text-gray-500">{race.formattedTime}</Text>
+                </Stack>
+                {race.isMyLeague && (
+                  <Box style={{ display: 'inline-block', marginTop: '0.25rem', padding: '0.125rem 0.5rem', borderRadius: '9999px', backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', fontSize: '0.75rem', fontWeight: 500 }}>
+                    Your League
+                  </Box>
+                )}
+              </Box>
+            ))}
+          </Stack>
+        ) : (
+          <Box py={4}>
+            <Text size="sm" color="text-gray-500" block style={{ textAlign: 'center' }}>No upcoming races</Text>
+          </Box>
+        )}
+      </Stack>
+    </Card>
+  );
+}