website refactor

apps/website/ui/RaceSidebar.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Clock, Trophy, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { SidebarRaceItem } from '@/ui/SidebarRaceItem';
+import { SidebarActionLink } from '@/ui/SidebarActionLink';
+import type { RaceViewData } from '@/lib/view-data/RacesViewData';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface RaceSidebarProps {
+  upcomingRaces: RaceViewData[];
+  recentResults: RaceViewData[];
+  onRaceClick: (raceId: string) => void;
+}
+
+export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
+  return (
+    <Stack gap={6}>
+      {/* Upcoming This Week */}
+      <Card>
+        <Stack gap={4}>
+          <Stack direction="row" align="center" justify="between">
+            <Heading level={3} icon={<Icon icon={Clock} size={4} color="rgb(59, 130, 246)" />}>
+              Next Up
+            </Heading>
+            <Text size="xs" color="text-gray-500">This week</Text>
+          </Stack>
+
+          {upcomingRaces.length === 0 ? (
+            <Box py={4} textAlign="center">
+              <Text size="sm" color="text-gray-400">No races scheduled this week</Text>
+            </Box>
+          ) : (
+            <Stack gap={3}>
+              {upcomingRaces.map((race) => (
+                <SidebarRaceItem
+                  key={race.id}
+                  race={{
+                    id: race.id,
+                    track: race.track,
+                    scheduledAt: race.scheduledAt
+                  }}
+                  onClick={() => onRaceClick(race.id)}
+                />
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      </Card>
+
+      {/* Recent Results */}
+      <Card>
+        <Stack gap={4}>
+          <Heading level={3} icon={<Icon icon={Trophy} size={4} color="rgb(245, 158, 11)" />}>
+            Recent Results
+          </Heading>
+
+          {recentResults.length === 0 ? (
+            <Box py={4} textAlign="center">
+              <Text size="sm" color="text-gray-400">No completed races yet</Text>
+            </Box>
+          ) : (
+            <Stack gap={3}>
+              {recentResults.map((race) => (
+                <SidebarRaceItem
+                  key={race.id}
+                  race={{
+                    id: race.id,
+                    track: race.track,
+                    scheduledAt: race.scheduledAt
+                  }}
+                  onClick={() => onRaceClick(race.id)}
+                />
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      </Card>
+
+      {/* Quick Actions */}
+      <Card>
+        <Stack gap={4}>
+          <Heading level={3}>Quick Actions</Heading>
+          <Stack gap={2}>
+            <SidebarActionLink
+              href={routes.public.leagues}
+              icon={Users}
+              label="Browse Leagues"
+            />
+            <SidebarActionLink
+              href={routes.public.leaderboards}
+              icon={Trophy}
+              label="View Leaderboards"
+              iconColor="text-warning-amber"
+              iconBgColor="bg-warning-amber/10"
+            />
+          </Stack>
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}