95 lines
4.5 KiB
TypeScript
95 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Crown } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Image } from '@/ui/Image';
|
|
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, onDriverClick }: RankingsPodiumProps) {
|
|
return (
|
|
<Box mb={10}>
|
|
<Box style={{ display: 'flex', alignItems: 'end', justifyContent: 'center', gap: '1rem' }}>
|
|
{[1, 0, 2].map((index) => {
|
|
const driver = podium[index];
|
|
if (!driver) return null;
|
|
|
|
const position = index === 1 ? 1 : index === 0 ? 2 : 3;
|
|
const config = {
|
|
1: { height: '10rem', color: 'rgba(250, 204, 21, 0.2)', borderColor: 'rgba(250, 204, 21, 0.4)', crown: '#facc15' },
|
|
2: { height: '8rem', color: 'rgba(209, 213, 219, 0.2)', borderColor: 'rgba(209, 213, 219, 0.4)', crown: '#d1d5db' },
|
|
3: { height: '6rem', color: 'rgba(217, 119, 6, 0.2)', borderColor: 'rgba(217, 119, 6, 0.4)', crown: '#d97706' },
|
|
}[position] || { height: '6rem', color: 'rgba(217, 119, 6, 0.2)', borderColor: 'rgba(217, 119, 6, 0.4)', crown: '#d97706' };
|
|
|
|
return (
|
|
<Box
|
|
key={driver.id}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onDriverClick?.(driver.id)}
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
|
|
>
|
|
<Box style={{ position: 'relative', marginBottom: '1rem' }}>
|
|
<Box style={{ position: 'relative', width: position === 1 ? '6rem' : '5rem', height: position === 1 ? '6rem' : '5rem', borderRadius: '9999px', overflow: 'hidden', border: `4px solid ${config.crown}`, boxShadow: position === 1 ? '0 0 30px rgba(250, 204, 21, 0.3)' : 'none' }}>
|
|
<Image
|
|
src={driver.avatarUrl}
|
|
alt={driver.name}
|
|
width={112}
|
|
height={112}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Box>
|
|
<Box style={{ position: 'absolute', bottom: '-0.5rem', left: '50%', transform: 'translateX(-50%)', width: '2rem', height: '2rem', borderRadius: '9999px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.875rem', fontWeight: 'bold', background: `linear-gradient(to bottom right, ${config.color}, transparent)`, border: `2px solid ${config.crown}`, color: config.crown }}>
|
|
{position}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Text weight="semibold" color="text-white" style={{ fontSize: position === 1 ? '1.125rem' : '1rem', marginBottom: '0.25rem' }}>
|
|
{driver.name}
|
|
</Text>
|
|
|
|
<Text font="mono" weight="bold" style={{ fontSize: position === 1 ? '1.25rem' : '1.125rem', color: position === 1 ? '#facc15' : '#3b82f6' }}>
|
|
{driver.rating.toString()}
|
|
</Text>
|
|
|
|
<Stack direction="row" align="center" gap={2} style={{ fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }}>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Text color="text-performance-green">🏆</Text>
|
|
{driver.wins}
|
|
</Stack>
|
|
<Text>•</Text>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Text color="text-warning-amber">🏅</Text>
|
|
{driver.podiums}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Box style={{ marginTop: '1rem', width: position === 1 ? '7rem' : '6rem', height: config.height, borderRadius: '0.5rem 0.5rem 0 0', background: `linear-gradient(to top, ${config.color}, transparent)`, borderTop: `1px solid ${config.borderColor}`, borderLeft: `1px solid ${config.borderColor}`, borderRight: `1px solid ${config.borderColor}`, display: 'flex', alignItems: 'end', justifyContent: 'center', paddingBottom: '1rem' }}>
|
|
<Text weight="bold" style={{ fontSize: position === 1 ? '3rem' : '2.25rem', color: config.crown }}>
|
|
{position}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|