51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Calendar } from 'lucide-react';
|
|
import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
|
|
import { ScheduleRaceCard } from '@/components/leagues/ScheduleRaceCard';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface LeagueScheduleTemplateProps {
|
|
viewData: LeagueScheduleViewData;
|
|
}
|
|
|
|
export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
|
|
return (
|
|
<Stack gap={6}>
|
|
<Box>
|
|
<Heading level={2}>Race Schedule</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
Upcoming and completed races for this season
|
|
</Text>
|
|
</Box>
|
|
|
|
{viewData.races.length === 0 ? (
|
|
<Card>
|
|
<Stack align="center" py={12} gap={4}>
|
|
<Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
|
|
<Icon icon={Calendar} size={8} color="#10b981" />
|
|
</Surface>
|
|
<Box style={{ textAlign: 'center' }}>
|
|
<Text weight="semibold" size="lg" color="text-white" block mb={2}>No Races Scheduled</Text>
|
|
<Text size="sm" color="text-gray-400">The race schedule will appear here once events are added.</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
) : (
|
|
<Stack gap={4}>
|
|
{viewData.races.map((race) => (
|
|
<ScheduleRaceCard key={race.id} race={race} />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|