119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Container } from '@/ui/Container';
|
|
import { Section } from '@/ui/Section';
|
|
import { RacesLiveRail } from '@/components/races/RacesLiveRail';
|
|
import { RacesCommandBar } from '@/components/races/RacesCommandBar';
|
|
import { NextUpRacePanel } from '@/components/races/NextUpRacePanel';
|
|
import { RacesDayGroup } from '@/components/races/RacesDayGroup';
|
|
import { RacesEmptyState } from '@/components/races/RacesEmptyState';
|
|
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
|
|
import { PageHeader } from '@/components/shared/PageHeader';
|
|
import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
|
|
|
|
export interface RacesIndexTemplateProps {
|
|
viewData: RacesViewData & {
|
|
nextUpRace?: RaceViewData;
|
|
};
|
|
// Filters
|
|
statusFilter: string;
|
|
setStatusFilter: (filter: string) => void;
|
|
leagueFilter: string;
|
|
setLeagueFilter: (filter: string) => void;
|
|
timeFilter: string;
|
|
setTimeFilter: (filter: string) => void;
|
|
// Actions
|
|
onRaceClick: (raceId: string) => void;
|
|
// UI State
|
|
showFilterModal: boolean;
|
|
setShowFilterModal: (show: boolean) => void;
|
|
}
|
|
|
|
export function RacesIndexTemplate({
|
|
viewData,
|
|
statusFilter,
|
|
setStatusFilter,
|
|
leagueFilter,
|
|
setLeagueFilter,
|
|
timeFilter,
|
|
setTimeFilter,
|
|
onRaceClick,
|
|
showFilterModal,
|
|
setShowFilterModal,
|
|
}: RacesIndexTemplateProps) {
|
|
const hasRaces = viewData.racesByDate.length > 0;
|
|
|
|
return (
|
|
<Section variant="default" padding="lg">
|
|
<PageHeader
|
|
title="Races"
|
|
subtitle="Live Sessions & Upcoming Events"
|
|
/>
|
|
|
|
{/* 1. Status Rail: Live sessions first */}
|
|
<Container size="full" padding="none" py={8}>
|
|
<RacesLiveRail
|
|
liveRaces={viewData.liveRaces}
|
|
onRaceClick={onRaceClick}
|
|
/>
|
|
</Container>
|
|
|
|
{/* 2. Command Bar: Fast filters */}
|
|
<Container size="full" padding="none" py={4}>
|
|
<RacesCommandBar
|
|
timeFilter={timeFilter}
|
|
setTimeFilter={setTimeFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
leagues={viewData.leagues}
|
|
onShowMoreFilters={() => setShowFilterModal(true)}
|
|
/>
|
|
</Container>
|
|
|
|
{/* 3. Next Up: High signal panel */}
|
|
{timeFilter === 'upcoming' && viewData.nextUpRace && (
|
|
<Container size="full" padding="none" py={8}>
|
|
<NextUpRacePanel
|
|
race={viewData.nextUpRace}
|
|
onRaceClick={onRaceClick}
|
|
/>
|
|
</Container>
|
|
)}
|
|
|
|
{/* 4. Browse by Day: Grouped schedule */}
|
|
{hasRaces ? (
|
|
<Container size="full" padding="none" py={8}>
|
|
{viewData.racesByDate.map((group) => (
|
|
<Container key={group.dateKey} size="full" padding="none" py={4}>
|
|
<RacesDayGroup
|
|
dateLabel={group.dateLabel}
|
|
races={group.races}
|
|
onRaceClick={onRaceClick}
|
|
/>
|
|
</Container>
|
|
))}
|
|
</Container>
|
|
) : (
|
|
<RacesEmptyState />
|
|
)}
|
|
|
|
<RaceFilterModal
|
|
isOpen={showFilterModal}
|
|
onClose={() => setShowFilterModal(false)}
|
|
statusFilter={statusFilter as any}
|
|
setStatusFilter={setStatusFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
timeFilter={timeFilter as any}
|
|
setTimeFilter={setTimeFilter}
|
|
searchQuery=""
|
|
setSearchQuery={() => {}}
|
|
leagues={viewData.leagues}
|
|
showSearch={true}
|
|
showTimeFilter={false}
|
|
/>
|
|
</Section>
|
|
);
|
|
}
|