website refactor

apps/website/components/leaderboards/LeaderboardPodium.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
+
+interface PodiumDriver {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  rating: number;
+  wins: number;
+  podiums: number;
+}
+
+interface LeaderboardPodiumProps {
+  podium: PodiumDriver[];
+  onDriverClick?: (id: string) => void;
+}
+
+export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumProps) {
+  // Order: 2nd, 1st, 3rd
+  const displayOrder = [1, 0, 2];
+  
+  return (
+    <Box mb={12}>
+      <Box display="flex" alignItems="end" justifyContent="center" gap={4} maxWidth="4xl" mx="auto">
+        {displayOrder.map((index) => {
+          const driver = podium[index];
+          if (!driver) return <Box key={index} flexGrow={1} />;
+          
+          const position = index + 1;
+          const isFirst = position === 1;
+          
+          const config = {
+            1: { height: '48', scale: '1.1', zIndex: 10, shadow: 'shadow-warning-amber/20' },
+            2: { height: '36', scale: '1', zIndex: 0, shadow: 'shadow-white/5' },
+            3: { height: '28', scale: '0.9', zIndex: 0, shadow: 'shadow-white/5' },
+          }[position as 1 | 2 | 3];
+
+          return (
+            <Box
+              key={driver.id}
+              as="button"
+              type="button"
+              onClick={() => onDriverClick?.(driver.id)}
+              display="flex"
+              flexDirection="col"
+              alignItems="center"
+              flexGrow={1}
+              transition
+              hoverScale
+              group
+              shadow={config.shadow}
+              zIndex={config.zIndex}
+            >
+              <Box position="relative" mb={4} transform={`scale(${config.scale})`}>
+                <Box 
+                  position="relative" 
+                  w={isFirst ? '32' : '24'} 
+                  h={isFirst ? '32' : '24'} 
+                  rounded="full" 
+                  overflow="hidden" 
+                  border 
+                  borderColor={isFirst ? 'border-warning-amber' : 'border-charcoal-outline'}
+                  borderWidth="3px"
+                  transition
+                  groupHoverBorderColor="primary-blue"
+                  shadow="xl"
+                >
+                  <Image
+                    src={driver.avatarUrl}
+                    alt={driver.name}
+                    width={128}
+                    height={128}
+                    fullWidth
+                    fullHeight
+                    objectFit="cover"
+                  />
+                </Box>
+                <Box 
+                  position="absolute" 
+                  bottom="-2" 
+                  left="50%" 
+                  w="10" 
+                  h="10" 
+                  rounded="full" 
+                  display="flex" 
+                  alignItems="center" 
+                  justifyContent="center" 
+                  border 
+                  transform="translateX(-50%)"
+                  borderWidth="2px"
+                  bg={MedalDisplay.getBg(position)}
+                  color={MedalDisplay.getColor(position)}
+                  shadow="lg"
+                >
+                  <Text size="sm" weight="bold">{position}</Text>
+                </Box>
+              </Box>
+
+              <Text 
+                weight="bold" 
+                color="text-white" 
+                size={isFirst ? 'lg' : 'base'} 
+                mb={1} 
+                block 
+                truncate
+                align="center"
+                px={2}
+                maxWidth="full"
+                groupHoverTextColor="text-primary-blue"
+                transition
+              >
+                {driver.name}
+              </Text>
+
+              <Text 
+                font="mono" 
+                weight="bold" 
+                size={isFirst ? 'xl' : 'lg'} 
+                block 
+                color={isFirst ? 'text-warning-amber' : 'text-primary-blue'}
+              >
+                {RatingDisplay.format(driver.rating)}
+              </Text>
+
+              <Stack direction="row" align="center" gap={3} mt={1}>
+                <Stack direction="row" align="center" gap={1}>
+                  <Text size="xs" color="text-gray-500" weight="bold" uppercase letterSpacing="wider">Wins</Text>
+                  <Text size="xs" weight="bold" color="text-performance-green">{driver.wins}</Text>
+                </Stack>
+                <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+                <Stack direction="row" align="center" gap={1}>
+                  <Text size="xs" color="text-gray-500" weight="bold" uppercase letterSpacing="wider">Podiums</Text>
+                  <Text size="xs" weight="bold" color="text-white">{driver.podiums}</Text>
+                </Stack>
+              </Stack>
+
+              <Box 
+                mt={6} 
+                w="full" 
+                h={config.height}
+                rounded="lg"
+                border
+                borderColor="border-charcoal-outline/50"
+                bg="bg-deep-charcoal/40"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                blur="sm"
+                groupHoverBorderColor="primary-blue/30"
+                transition
+              >
+                <Text 
+                  weight="bold" 
+                  size="4xl" 
+                  color={MedalDisplay.getColor(position)}
+                  opacity={0.1}
+                  fontSize={isFirst ? '5rem' : '3.5rem'}
+                >
+                  {position}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}