91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { SidebarRaceItem } from '@/components/races/SidebarRaceItem';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { SidebarActionLink } from '@/ui/SidebarActionLink';
|
|
import { Text } from '@/ui/Text';
|
|
import { Clock, Trophy, Users } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface RaceSidebarProps {
|
|
upcomingRaces: RaceViewData[];
|
|
recentResults: RaceViewData[];
|
|
onRaceClick: (raceId: string) => void;
|
|
}
|
|
|
|
export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
|
{/* Upcoming This Week */}
|
|
<Panel
|
|
title="Next Up"
|
|
description="This week"
|
|
>
|
|
{upcomingRaces.length === 0 ? (
|
|
<div style={{ padding: '1rem 0', textAlign: 'center' }}>
|
|
<Text size="sm" variant="low">No races scheduled this week</Text>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
{upcomingRaces.map((race) => (
|
|
<SidebarRaceItem
|
|
key={race.id}
|
|
race={{
|
|
id: race.id,
|
|
track: race.track,
|
|
scheduledAt: race.scheduledAt
|
|
}}
|
|
onClick={() => onRaceClick(race.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
{/* Recent Results */}
|
|
<Panel
|
|
title="Recent Results"
|
|
>
|
|
{recentResults.length === 0 ? (
|
|
<div style={{ padding: '1rem 0', textAlign: 'center' }}>
|
|
<Text size="sm" variant="low">No completed races yet</Text>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
{recentResults.map((race) => (
|
|
<SidebarRaceItem
|
|
key={race.id}
|
|
race={{
|
|
id: race.id,
|
|
track: race.track,
|
|
scheduledAt: race.scheduledAt
|
|
}}
|
|
onClick={() => onRaceClick(race.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Panel>
|
|
|
|
{/* Quick Actions */}
|
|
<Panel title="Quick Actions">
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
<SidebarActionLink
|
|
href={routes.public.leagues}
|
|
icon={Users}
|
|
label="Browse Leagues"
|
|
/>
|
|
<SidebarActionLink
|
|
href={routes.public.leaderboards}
|
|
icon={Trophy}
|
|
label="View Leaderboards"
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
);
|
|
}
|