website refactor

2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
--- a/apps/website/ui/RankingsPodium.tsx
+++ b/apps/website/ui/RankingsPodium.tsx
@@ -0,0 +1,141 @@
+
+
+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>
+  );
+}