website refactor

apps/website/components/races/UpcomingRacesSidebar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { RaceSummaryItem } from '@/ui/RaceSummaryItem';
+
+type UpcomingRace = {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string | Date;
+};
+
+interface UpcomingRacesSidebarProps {
+  races: UpcomingRace[];
+}
+
+export function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
+  if (!races.length) {
+    return null;
+  }
+
+  return (
+    <Card bg="bg-iron-gray/80" p={4}>
+      <Stack direction="row" align="baseline" justify="between" mb={3}>
+        <Heading level={3}>Upcoming races</Heading>
+        <Button
+          as="a"
+          href="/races"
+          variant="secondary"
+          size="sm"
+        >
+          View all
+        </Button>
+      </Stack>
+      <Stack gap={3}>
+        {races.slice(0, 4).map((race) => {
+          const scheduledAt = typeof race.scheduledAt === 'string' ? new Date(race.scheduledAt) : race.scheduledAt;
+
+          return (
+            <RaceSummaryItem
+              key={race.id}
+              track={race.track}
+              meta={race.car}
+              date={scheduledAt}
+            />
+          );
+        })}
+      </Stack>
+    </Card>
+  );
+}