90 lines
3.8 KiB
TypeScript
90 lines
3.8 KiB
TypeScript
import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
|
|
import { Card } from '@/ui/Card';
|
|
import { Section } from '@/ui/Section';
|
|
import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
|
|
|
|
interface LeagueScheduleTemplateProps {
|
|
viewData: LeagueScheduleViewData;
|
|
}
|
|
|
|
export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
|
|
return (
|
|
<Section>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-white">Race Schedule</h2>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
Upcoming and completed races for this season
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{viewData.races.length === 0 ? (
|
|
<Card>
|
|
<div className="text-center py-12">
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
|
|
<Calendar className="w-8 h-8 text-performance-green" />
|
|
</div>
|
|
<p className="font-semibold text-lg text-white mb-2">No Races Scheduled</p>
|
|
<p className="text-sm text-gray-400">The race schedule will appear here once events are added.</p>
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{viewData.races.map((race) => (
|
|
<Card key={race.id}>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className={`w-3 h-3 rounded-full ${race.isPast ? 'bg-performance-green' : 'bg-primary-blue'}`} />
|
|
<h3 className="font-semibold text-white text-lg">{race.name}</h3>
|
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
race.status === 'completed'
|
|
? 'bg-performance-green/20 text-performance-green'
|
|
: 'bg-primary-blue/20 text-primary-blue'
|
|
}`}>
|
|
{race.status === 'completed' ? 'Completed' : 'Scheduled'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<Calendar className="w-4 h-4 text-gray-400" />
|
|
<span>{new Date(race.scheduledAt).toLocaleDateString()}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<Clock className="w-4 h-4 text-gray-400" />
|
|
<span>{new Date(race.scheduledAt).toLocaleTimeString()}</span>
|
|
</div>
|
|
|
|
{race.track && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<MapPin className="w-4 h-4 text-gray-400" />
|
|
<span className="truncate">{race.track}</span>
|
|
</div>
|
|
)}
|
|
|
|
{race.car && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
|
<Car className="w-4 h-4 text-gray-400" />
|
|
<span className="truncate">{race.car}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{race.sessionType && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-400">
|
|
<Trophy className="w-4 h-4" />
|
|
<span>{race.sessionType} Session</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Section>
|
|
);
|
|
} |