66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import Card from '@/components/ui/Card';
|
|
|
|
interface LeagueChampionshipStatsProps {
|
|
standings: Array<{
|
|
driverId: string;
|
|
position: number;
|
|
totalPoints: number;
|
|
racesFinished: number;
|
|
}>;
|
|
drivers: Array<{
|
|
id: string;
|
|
name: string;
|
|
}>;
|
|
}
|
|
|
|
export function LeagueChampionshipStats({ standings, drivers }: LeagueChampionshipStatsProps) {
|
|
if (standings.length === 0) return null;
|
|
|
|
const leader = standings[0];
|
|
const totalRaces = Math.max(...standings.map(s => s.racesFinished), 0);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
|
|
<span className="text-2xl">🏆</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-400 mb-1">Championship Leader</p>
|
|
<p className="font-bold text-white">{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</p>
|
|
<p className="text-sm text-yellow-400 font-medium">{leader?.totalPoints || 0} points</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-primary-blue/10 flex items-center justify-center">
|
|
<span className="text-2xl">🏁</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-400 mb-1">Races Completed</p>
|
|
<p className="text-2xl font-bold text-white">{totalRaces}</p>
|
|
<p className="text-sm text-gray-400">Season in progress</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-performance-green/10 flex items-center justify-center">
|
|
<span className="text-2xl">👥</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-400 mb-1">Active Drivers</p>
|
|
<p className="text-2xl font-bold text-white">{standings.length}</p>
|
|
<p className="text-sm text-gray-400">Competing for points</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|