website refactor
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
|
||||
|
||||
import { Image } from '@/ui/Image';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Avatar } from '@/ui/Avatar';
|
||||
import { Group } from '@/ui/Group';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
|
||||
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import React from 'react';
|
||||
|
||||
interface PodiumDriver {
|
||||
id: string;
|
||||
@@ -20,121 +22,67 @@ interface RankingsPodiumProps {
|
||||
|
||||
export function RankingsPodium({ podium, onDriverClick }: RankingsPodiumProps) {
|
||||
return (
|
||||
<Stack mb={10}>
|
||||
<Stack 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' };
|
||||
<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 (
|
||||
<Stack
|
||||
key={driver.id}
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={() => onDriverClick?.(driver.id)}
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
alignItems="center"
|
||||
bg="transparent"
|
||||
border={false}
|
||||
cursor="pointer"
|
||||
>
|
||||
<Stack position="relative" mb={4}>
|
||||
<Stack
|
||||
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"
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
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}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<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>
|
||||
|
||||
<Stack
|
||||
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}`
|
||||
}}
|
||||
return (
|
||||
<Group
|
||||
key={driver.id}
|
||||
direction="column"
|
||||
align="center"
|
||||
gap={4}
|
||||
>
|
||||
<Group direction="column" align="center" gap={2}>
|
||||
<Group
|
||||
justify="center"
|
||||
align="center"
|
||||
>
|
||||
<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>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<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'}>
|
||||
{RatingDisplay.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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user