website refactor

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -1,15 +1,12 @@
-import React from 'react';
-import { Users, ChevronRight } from 'lucide-react';
-import { Button } from '@/ui/Button';
+import { Users } 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 { getMediaUrl } from '@/lib/utilities/media';
-import { RankMedal } from './RankMedal';
-import { LeaderboardTableShell } from './LeaderboardTableShell';
+import { Icon } from '@/ui/Icon';
 
 interface TeamLeaderboardPreviewProps {
   teams: {
@@ -30,54 +27,18 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
   const top5 = teams;
 
   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-purple-500/15 to-purple-500/5" 
-            border 
-            borderColor="border-purple-500/20"
-          >
-            <Icon icon={Users} size={5} color="text-purple-400" />
-          </Box>
-          <Box>
-            <Heading level={3} fontSize="lg" weight="bold" color="text-white" letterSpacing="tight">Team Rankings</Heading>
-            <Text size="xs" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Top Performing Teams</Text>
-          </Box>
-        </Box>
-        <Button
-          variant="secondary"
-          onClick={onNavigateToTeams}
-          size="sm"
-          hoverBg="bg-purple-500/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}>
-        {top5.map((team, index) => {
+    <LeaderboardPreviewShell
+      title="Team Rankings"
+      subtitle="Top Performing Teams"
+      onViewFull={onNavigateToTeams}
+      icon={Users}
+      iconColor="var(--neon-purple)"
+      iconBgGradient="linear-gradient(to bottom right, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1))"
+      viewFullLabel="View All"
+    >
+      <LeaderboardList>
+        {top5.map((team) => {
           const position = team.position;
-          const isLast = index === top5.length - 1;
 
           return (
             <Box
@@ -95,11 +56,9 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
               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 
@@ -166,7 +125,7 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
             </Box>
           );
         })}
-      </Stack>
-    </LeaderboardTableShell>
+      </LeaderboardList>
+    </LeaderboardPreviewShell>
   );
 }