73 lines
2.5 KiB
TypeScript
73 lines
2.5 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 { Grid } from '@/ui/Grid';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
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}>
|
|
<Card>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="full" padding={3} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)' }}>
|
|
<Text size="2xl">🏆</Text>
|
|
</Surface>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-400" block mb={1}>Championship Leader</Text>
|
|
<Text weight="bold" color="text-white" block>{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</Text>
|
|
<Text size="sm" color="text-warning-amber" weight="medium">{leader?.totalPoints || 0} points</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Card>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="full" padding={3} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
|
|
<Text size="2xl">🏁</Text>
|
|
</Surface>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-400" block mb={1}>Races Completed</Text>
|
|
<Text size="2xl" weight="bold" color="text-white" block>{totalRaces}</Text>
|
|
<Text size="sm" color="text-gray-400">Season in progress</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Card>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="full" padding={3} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
|
|
<Text size="2xl">👥</Text>
|
|
</Surface>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-400" block mb={1}>Active Drivers</Text>
|
|
<Text size="2xl" weight="bold" color="text-white" block>{standings.length}</Text>
|
|
<Text size="sm" color="text-gray-400">Competing for points</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
);
|
|
}
|