86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
|
|
import { Avatar } from '@/ui/Avatar';
|
|
import { Group } from '@/ui/Group';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface PodiumDriver {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl: string;
|
|
rating: number;
|
|
wins: number;
|
|
podiums: number;
|
|
}
|
|
|
|
interface RankingsPodiumProps {
|
|
podium: PodiumDriver[];
|
|
onDriverClick?: (id: string) => void;
|
|
}
|
|
|
|
export function RankingsPodium({ podium }: RankingsPodiumProps) {
|
|
return (
|
|
<Group justify="center" align="end" gap={4}>
|
|
{[1, 0, 2].map((index) => {
|
|
const driver = podium[index];
|
|
if (!driver) return null;
|
|
|
|
const position = index === 1 ? 1 : index === 0 ? 2 : 3;
|
|
const isFirst = position === 1;
|
|
|
|
const config = {
|
|
1: { height: '10rem', variant: 'precision' },
|
|
2: { height: '8rem', variant: 'muted' },
|
|
3: { height: '6rem', variant: 'muted' },
|
|
}[position as 1 | 2 | 3];
|
|
|
|
return (
|
|
<Group
|
|
key={driver.id}
|
|
direction="column"
|
|
align="center"
|
|
gap={4}
|
|
>
|
|
<Group direction="column" align="center" gap={2}>
|
|
<Group
|
|
justify="center"
|
|
align="center"
|
|
>
|
|
<Avatar
|
|
src={driver.avatarUrl}
|
|
alt={driver.name}
|
|
size={isFirst ? 'lg' : 'md'}
|
|
/>
|
|
</Group>
|
|
|
|
<Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'}>{driver.name}</Text>
|
|
<Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'}>
|
|
{RatingFormatter.format(driver.rating)}
|
|
</Text>
|
|
</Group>
|
|
|
|
<Surface
|
|
variant={config.variant as any}
|
|
rounded="lg"
|
|
style={{
|
|
width: '6rem',
|
|
height: config.height,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
border: '1px solid var(--ui-color-border-default)',
|
|
borderBottom: 'none',
|
|
borderBottomLeftRadius: 0,
|
|
borderBottomRightRadius: 0
|
|
}}
|
|
>
|
|
<Text size="3xl" weight="bold" variant="low" opacity={0.2}>
|
|
{position}
|
|
</Text>
|
|
</Surface>
|
|
</Group>
|
|
);
|
|
})}
|
|
</Group>
|
|
);
|
|
}
|