website refactor

apps/website/components/leaderboards/DriverLeaderboardPreview.tsx

@@ -1,16 +1,12 @@
-import React from 'react';
-import { Trophy, ChevronRight } from 'lucide-react';
-import { Button } from '@/ui/Button';
+import { Trophy } from 'lucide-react';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
+import { LeaderboardList } from '@/ui/LeaderboardList';
+import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
+import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
-import { RankMedal } from './RankMedal';
-import { LeaderboardTableShell } from './LeaderboardTableShell';
 
 interface DriverLeaderboardPreviewProps {
   drivers: {
@@ -32,54 +28,18 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
   const top10 = drivers; // Already sliced in builder
 
   return (
-    <LeaderboardTableShell>
-      <Box 
-        display="flex" 
-        alignItems="center" 
-        justifyContent="between" 
-        px={5} 
-        py={4} 
-        borderBottom 
-        borderColor="border-charcoal-outline/50" 
-        bg="bg-deep-charcoal/40"
-      >
-        <Box display="flex" alignItems="center" gap={3}>
-          <Box 
-            display="flex" 
-            h="10" 
-            w="10" 
-            alignItems="center" 
-            justifyContent="center" 
-            rounded="lg" 
-            bg="bg-gradient-to-br from-primary-blue/15 to-primary-blue/5" 
-            border 
-            borderColor="border-primary-blue/20"
-          >
-            <Icon icon={Trophy} size={5} color="text-primary-blue" />
-          </Box>
-          <Box>
-            <Heading level={3} fontSize="lg" weight="bold" color="text-white" letterSpacing="tight">Driver Rankings</Heading>
-            <Text size="xs" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Top Performers</Text>
-          </Box>
-        </Box>
-        <Button
-          variant="secondary"
-          onClick={onNavigateToDrivers}
-          size="sm"
-          hoverBg="bg-primary-blue/10"
-          transition
-        >
-          <Stack direction="row" align="center" gap={2}>
-            <Text size="sm" weight="medium">View All</Text>
-            <Icon icon={ChevronRight} size={4} />
-          </Stack>
-        </Button>
-      </Box>
-
-      <Stack gap={0}>
+    <LeaderboardPreviewShell
+      title="Driver Rankings"
+      subtitle="Top Performers"
+      onViewFull={onNavigateToDrivers}
+      icon={Trophy}
+      iconColor="var(--primary-blue)"
+      iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
+      viewFullLabel="View All"
+    >
+      <LeaderboardList>
         {top10.map((driver, index) => {
           const position = index + 1;
-          const isLast = index === top10.length - 1;
 
           return (
             <Box
@@ -97,11 +57,9 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
               transition
               hoverBg="bg-white/[0.02]"
               group
-              borderBottom={!isLast}
-              borderColor="border-charcoal-outline/30"
             >
               <Box w="8" display="flex" justifyContent="center">
-                <RankMedal rank={position} size="sm" />
+                <RankBadge rank={position} />
               </Box>
 
               <Box 
@@ -111,7 +69,6 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
                 rounded="full" 
                 overflow="hidden" 
                 border 
-                borderWidth="1px" 
                 borderColor="border-charcoal-outline" 
                 groupHoverBorderColor="primary-blue/50" 
                 transition
@@ -152,7 +109,7 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
             </Box>
           );
         })}
-      </Stack>
-    </LeaderboardTableShell>
+      </LeaderboardList>
+    </LeaderboardPreviewShell>
   );
 }