website refactor

apps/website/ui/UpcomingRaces.tsx

@@ -0,0 +1,62 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { Card } from '@/ui/Card';
+import { MinimalEmptyState } from '@/ui/EmptyState';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { UpcomingRaceItem } from '@/ui/UpcomingRaceItem';
+import { UpcomingRacesList } from '@/ui/UpcomingRacesList';
+import { Calendar } from 'lucide-react';
+
+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 direction="row" align="center" justify="between" mb={4}>
+        <Heading level={3} icon={<Icon icon={Calendar} size={5} color="var(--primary-blue)" />}>
+          Upcoming Races
+        </Heading>
+        <Link href={routes.public.races} variant="primary">
+          <Text size="xs">View all</Text>
+        </Link>
+      </Stack>
+      {hasRaces ? (
+        <UpcomingRacesList>
+          {races.slice(0, 5).map((race) => (
+            <UpcomingRaceItem
+              key={race.id}
+              track={race.track}
+              car={race.car}
+              formattedDate={race.formattedDate}
+              formattedTime={race.formattedTime}
+              isMyLeague={race.isMyLeague}
+            />
+          ))}
+        </UpcomingRacesList>
+      ) : (
+        <MinimalEmptyState
+          icon={Calendar}
+          title="No upcoming races"
+          description="Check back later for new events"
+        />
+      )}
+    </Card>
+  );
+}