107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
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>
|
|
);
|
|
}
|