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/LeaderboardPreview.tsx
+++ b/apps/website/ui/LeaderboardPreview.tsx
@@ -0,0 +1,105 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { LeaderboardItem } from '@/ui/LeaderboardItem';
+import { LeaderboardList } from '@/ui/LeaderboardList';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Award, ChevronRight } from 'lucide-react';
+
+const SKILL_LEVELS = [
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+];
+
+const CATEGORIES = [
+  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
+  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
+  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
+  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
+  { id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
+  { id: 'sprint', label: 'Sprint', color: 'text-red-400' },
+];
+
+interface LeaderboardPreviewProps {
+  drivers: {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    nationality: string;
+    rating: number;
+    wins: number;
+    skillLevel?: string;
+    category?: string;
+  }[];
+  onDriverClick: (id: string) => void;
+  onNavigate: (href: string) => void;
+}
+
+export function LeaderboardPreview({ drivers, onDriverClick, onNavigate }: LeaderboardPreviewProps) {
+  const top5 = drivers.slice(0, 5);
+
+  return (
+    <Stack gap={4} mb={10}>
+      <Stack direction="row" align="center" justify="between">
+        <Stack direction="row" align="center" gap={3}>
+          <Box 
+            display="flex" 
+            center 
+            w="10" 
+            h="10" 
+            rounded="xl" 
+            bg="bg-gradient-to-br from-yellow-400/20 to-amber-600/10" 
+            border 
+            borderColor="border-yellow-400/30"
+          >
+            <Icon icon={Award} size={5} color="rgb(250, 204, 21)" />
+          </Box>
+          <Box>
+            <Heading level={2}>Top Drivers</Heading>
+            <Text size="xs" color="text-gray-500">Highest rated competitors</Text>
+          </Box>
+        </Stack>
+
+        <Button
+          variant="secondary"
+          onClick={() => onNavigate(routes.leaderboards.drivers)}
+          icon={<Icon icon={ChevronRight} size={4} />}
+        >
+          Full Rankings
+        </Button>
+      </Stack>
+
+      <LeaderboardList>
+        {top5.map((driver, index) => {
+          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
+          const position = index + 1;
+
+          return (
+            <LeaderboardItem
+              key={driver.id}
+              position={position}
+              name={driver.name}
+              avatarUrl={driver.avatarUrl}
+              nationality={driver.nationality}
+              rating={driver.rating}
+              wins={driver.wins}
+              skillLevelLabel={levelConfig?.label}
+              skillLevelColor={levelConfig?.color}
+              categoryLabel={categoryConfig?.label}
+              categoryColor={categoryConfig?.color}
+              onClick={() => onDriverClick(driver.id)}
+            />
+          );
+        })}
+      </LeaderboardList>
+    </Stack>
+  );
+}