120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
|
|
import { RaceFilterBar } from '@/components/races/RaceFilterBar';
|
|
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
|
|
import { RacePageHeader } from '@/components/races/RacePageHeader';
|
|
import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
|
|
import { RaceSidebar } from '@/components/races/RaceSidebar';
|
|
import type { SessionStatus } from '@/components/races/SessionStatusBadge';
|
|
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
|
|
import { Container } from '@/ui/Container';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { GridItem } from '@/ui/GridItem';
|
|
import { Stack } from '@/ui/Stack';
|
|
import React from 'react';
|
|
|
|
export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
|
|
export type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
|
|
|
|
export interface RacesTemplateProps {
|
|
viewData: RacesViewData;
|
|
// Filters
|
|
statusFilter: RaceStatusFilter;
|
|
setStatusFilter: (filter: RaceStatusFilter) => void;
|
|
leagueFilter: string;
|
|
setLeagueFilter: (filter: string) => void;
|
|
timeFilter: TimeFilter;
|
|
setTimeFilter: (filter: TimeFilter) => void;
|
|
// Actions
|
|
onRaceClick: (raceId: string) => void;
|
|
onLeagueClick: (leagueId: string) => void;
|
|
onWithdraw: (raceId: string) => void;
|
|
onCancel: (raceId: string) => void;
|
|
// UI State
|
|
showFilterModal: boolean;
|
|
setShowFilterModal: (show: boolean) => void;
|
|
}
|
|
|
|
export function RacesTemplate({
|
|
viewData,
|
|
statusFilter,
|
|
setStatusFilter,
|
|
leagueFilter,
|
|
setLeagueFilter,
|
|
timeFilter,
|
|
setTimeFilter,
|
|
onRaceClick,
|
|
showFilterModal,
|
|
setShowFilterModal,
|
|
}: RacesTemplateProps) {
|
|
return (
|
|
<Container size="lg">
|
|
<Stack gap={8} paddingY={12}>
|
|
<RacePageHeader
|
|
totalCount={viewData.totalCount}
|
|
scheduledCount={viewData.scheduledCount}
|
|
runningCount={viewData.runningCount}
|
|
completedCount={viewData.completedCount}
|
|
/>
|
|
|
|
<LiveRacesBanner
|
|
liveRaces={viewData.liveRaces}
|
|
onRaceClick={onRaceClick}
|
|
/>
|
|
|
|
<Grid cols={12} gap={6}>
|
|
<GridItem colSpan={12} lgSpan={8}>
|
|
<Stack gap={6}>
|
|
<RaceFilterBar
|
|
timeFilter={timeFilter}
|
|
setTimeFilter={setTimeFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
leagues={viewData.leagues}
|
|
onShowMoreFilters={() => setShowFilterModal(true)}
|
|
/>
|
|
|
|
<RaceScheduleTable
|
|
races={viewData.races.map(race => ({
|
|
id: race.id,
|
|
track: race.track,
|
|
car: race.car,
|
|
leagueName: race.leagueName,
|
|
time: race.timeLabel,
|
|
status: race.status as SessionStatus
|
|
}))}
|
|
onRaceClick={onRaceClick}
|
|
/>
|
|
</Stack>
|
|
</GridItem>
|
|
|
|
<GridItem colSpan={12} lgSpan={4}>
|
|
<RaceSidebar
|
|
upcomingRaces={viewData.upcomingRaces}
|
|
recentResults={viewData.recentResults}
|
|
onRaceClick={onRaceClick}
|
|
/>
|
|
</GridItem>
|
|
</Grid>
|
|
|
|
<RaceFilterModal
|
|
isOpen={showFilterModal}
|
|
onClose={() => setShowFilterModal(false)}
|
|
statusFilter={statusFilter as any}
|
|
setStatusFilter={setStatusFilter as any}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
timeFilter={timeFilter as any}
|
|
setTimeFilter={setTimeFilter as any}
|
|
searchQuery=""
|
|
setSearchQuery={() => {}}
|
|
leagues={viewData.leagues}
|
|
showSearch={false}
|
|
showTimeFilter={false}
|
|
/>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|