142 lines
5.4 KiB
TypeScript
142 lines
5.4 KiB
TypeScript
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
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 display="flex" alignItems="end" justifyContent="center" 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 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)}
|
|
display="flex"
|
|
flexDirection="col"
|
|
alignItems="center"
|
|
bg="transparent"
|
|
border={false}
|
|
cursor="pointer"
|
|
>
|
|
<Box position="relative" mb={4}>
|
|
<Box
|
|
position="relative"
|
|
w={position === 1 ? '24' : '20'}
|
|
h={position === 1 ? '24' : '20'}
|
|
rounded="full"
|
|
overflow="hidden"
|
|
border
|
|
borderColor={config.crown === '#facc15' ? 'border-warning-amber' : config.crown === '#d1d5db' ? 'border-gray-300' : 'border-orange-600'}
|
|
style={{ borderWidth: '4px', boxShadow: position === 1 ? '0 0 30px rgba(250, 204, 21, 0.3)' : 'none' }}
|
|
>
|
|
<Image
|
|
src={driver.avatarUrl}
|
|
alt={driver.name}
|
|
width={112}
|
|
height={112}
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
<Box
|
|
position="absolute"
|
|
bottom="-2"
|
|
left="50%"
|
|
w="8"
|
|
h="8"
|
|
rounded="full"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
border
|
|
weight="bold"
|
|
size="sm"
|
|
borderColor={config.crown === '#facc15' ? 'border-warning-amber' : config.crown === '#d1d5db' ? 'border-gray-300' : 'border-orange-600'}
|
|
color={config.crown === '#facc15' ? 'text-warning-amber' : config.crown === '#d1d5db' ? 'text-gray-300' : 'text-orange-600'}
|
|
style={{
|
|
transform: 'translateX(-50%)',
|
|
borderWidth: '2px',
|
|
background: `linear-gradient(to bottom right, ${config.color}, transparent)`
|
|
}}
|
|
>
|
|
{position}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Text weight="semibold" color="text-white" size={position === 1 ? 'lg' : 'base'} mb={1} block>
|
|
{driver.name}
|
|
</Text>
|
|
|
|
<Text font="mono" weight="bold" size={position === 1 ? 'xl' : 'lg'} block color={position === 1 ? 'text-warning-amber' : 'text-primary-blue'}>
|
|
{driver.rating.toString()}
|
|
</Text>
|
|
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Text>🏆</Text>
|
|
<Text color="text-gray-400">{driver.wins}</Text>
|
|
</Stack>
|
|
<Text color="text-gray-500">•</Text>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Text>🏅</Text>
|
|
<Text color="text-gray-400">{driver.podiums}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Box
|
|
mt={4}
|
|
w={position === 1 ? '28' : '24'}
|
|
h={config.height}
|
|
rounded="lg"
|
|
display="flex"
|
|
alignItems="end"
|
|
justifyContent="center"
|
|
pb={4}
|
|
style={{
|
|
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}`
|
|
}}
|
|
>
|
|
<Text weight="bold" size={position === 1 ? '4xl' : '3xl'} color={config.crown === '#facc15' ? 'text-warning-amber' : config.crown === '#d1d5db' ? 'text-gray-300' : 'text-orange-600'}>
|
|
{position}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|