52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { HorizontalStatCard } from '@/ui/HorizontalStatCard';
|
|
import { Text } from '@/ui/Text';
|
|
import { Grid } from '@/ui/Grid';
|
|
|
|
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 (
|
|
<Grid cols={3} gap={4}>
|
|
<HorizontalStatCard
|
|
label="Championship Leader"
|
|
value={drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}
|
|
subValue={`${leader?.totalPoints || 0} points`}
|
|
icon={<Text size="2xl">🏆</Text>}
|
|
iconBgColor="rgba(250, 204, 21, 0.1)"
|
|
/>
|
|
|
|
<HorizontalStatCard
|
|
label="Races Completed"
|
|
value={totalRaces}
|
|
subValue="Season in progress"
|
|
icon={<Text size="2xl">🏁</Text>}
|
|
iconBgColor="rgba(59, 130, 246, 0.1)"
|
|
/>
|
|
|
|
<HorizontalStatCard
|
|
label="Active Drivers"
|
|
value={standings.length}
|
|
subValue="Competing for points"
|
|
icon={<Text size="2xl">👥</Text>}
|
|
iconBgColor="rgba(16, 185, 129, 0.1)"
|
|
/>
|
|
</Grid>
|
|
);
|
|
}
|