website refactor

2026-01-14 23:46:04 +01:00
parent c1a86348d7
commit 4a2d7d15a5
294 changed files with 5637 additions and 3418 deletions
--- a/apps/website/components/drivers/RankingsPodium.tsx
+++ b/apps/website/components/drivers/RankingsPodium.tsx
@@ -0,0 +1,94 @@
+'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>
+  );
+}