website refactor

apps/website/components/leagues/LeagueCard.tsx

@@ -1,11 +1,10 @@
 
 
 import { ReactNode } from 'react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
 import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight } from 'lucide-react';
@@ -50,7 +49,7 @@ export function LeagueCard({
   onClick,
 }: LeagueCardProps) {
   return (
-    <Box
+    <Stack
       position="relative"
       cursor={onClick ? 'pointer' : 'default'}
       h="full"
@@ -58,7 +57,7 @@ export function LeagueCard({
       className="group"
     >
       {/* Card Container */}
-      <Box 
+      <Stack 
         position="relative" 
         h="full" 
         rounded="none" 
@@ -70,7 +69,7 @@ export function LeagueCard({
         className="hover:border-primary-accent/30 hover:bg-panel-gray/60 transition-all duration-300"
       >
         {/* Cover Image */}
-        <Box position="relative" h="32" overflow="hidden">
+        <Stack position="relative" h="32" overflow="hidden">
           <Image
             src={coverUrl}
             alt={`${name} cover`}
@@ -80,21 +79,21 @@ export function LeagueCard({
             className="transition-transform duration-500 group-hover:scale-105 opacity-60"
           />
           {/* Gradient Overlay */}
-          <Box position="absolute" inset="0" bg="linear-gradient(to top, #0C0D0F, transparent)" />
+          <Stack position="absolute" inset="0" bg="linear-gradient(to top, #0C0D0F, transparent)" />
           
           {/* Badges - Top Left */}
-          <Box position="absolute" top="3" left="3" display="flex" alignItems="center" gap={2}>
+          <Stack position="absolute" top="3" left="3" display="flex" alignItems="center" gap={2}>
             {badges}
-          </Box>
+          </Stack>
 
           {/* Championship Type Badge - Top Right */}
-          <Box position="absolute" top="3" right="3">
+          <Stack position="absolute" top="3" right="3">
             {championshipBadge}
-          </Box>
+          </Stack>
 
           {/* Logo */}
-          <Box position="absolute" left="4" bottom="-6" zIndex={10}>
-            <Box w="12" h="12" rounded="none" overflow="hidden" border borderColor="border-gray/50" bg="graphite-black" shadow="xl">
+          <Stack position="absolute" left="4" bottom="-6" zIndex={10}>
+            <Stack w="12" h="12" rounded="none" overflow="hidden" border borderColor="border-gray/50" bg="graphite-black" shadow="xl">
               {logoUrl ? (
                 <Image
                   src={logoUrl}
@@ -108,15 +107,15 @@ export function LeagueCard({
               ) : (
                 <PlaceholderImage size={48} />
               )}
-            </Box>
-          </Box>
-        </Box>
+            </Stack>
+          </Stack>
+        </Stack>
 
         {/* Content */}
-        <Box pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
+        <Stack pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
           {/* Title & Description */}
           <Stack direction="row" align="center" gap={2} mb={1}>
-            <Box w="1" h="4" bg="primary-accent" />
+            <Stack w="1" h="4" bg="primary-accent" />
             <Heading level={3} fontSize="lg" weight="bold" className="line-clamp-1 group-hover:text-primary-accent transition-colors tracking-tight">
               {name}
             </Heading>
@@ -126,17 +125,17 @@ export function LeagueCard({
           </Text>
 
           {/* Stats Row */}
-          <Box display="flex" alignItems="center" gap={3} mb={4}>
+          <Stack display="flex" alignItems="center" gap={3} mb={4}>
             {/* Primary Slots (Drivers/Teams/Nations) */}
-            <Box flexGrow={1}>
-              <Box display="flex" alignItems="center" justifyContent="between" mb={1.5}>
+            <Stack flexGrow={1}>
+              <Stack display="flex" alignItems="center" justifyContent="between" mb={1.5}>
                 <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">{slotLabel}</Text>
                 <Text size="xs" color="text-gray-400" font="mono">
                   {usedSlots}/{maxSlots || '∞'}
                 </Text>
-              </Box>
-              <Box h="1" rounded="none" bg="border-gray/30" overflow="hidden">
-                <Box
+              </Stack>
+              <Stack h="1" rounded="none" bg="border-gray/30" overflow="hidden">
+                <Stack
                   h="full"
                   rounded="none"
                   transition
@@ -149,45 +148,45 @@ export function LeagueCard({
                   }
                   style={{ width: `${Math.min(fillPercentage, 100)}%` }}
                 />
-              </Box>
-            </Box>
+              </Stack>
+            </Stack>
 
             {/* Open Slots Badge */}
             {hasOpenSlots && (
-              <Box display="flex" alignItems="center" gap={1.5} px={2} py={1} rounded="none" bg="primary-accent/5" border borderColor="primary-accent/20">
-                <Box w="1.5" h="1.5" rounded="full" bg="primary-accent" className="animate-pulse" />
+              <Stack display="flex" alignItems="center" gap={1.5} px={2} py={1} rounded="none" bg="primary-accent/5" border borderColor="primary-accent/20">
+                <Stack w="1.5" h="1.5" rounded="full" bg="primary-accent" className="animate-pulse" />
                 <Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-tighter">
                   {openSlotsCount} OPEN
                 </Text>
-              </Box>
+              </Stack>
             )}
-          </Box>
+          </Stack>
 
           {/* Spacer to push footer to bottom */}
-          <Box flexGrow={1} />
+          <Stack flexGrow={1} />
 
           {/* Footer Info */}
-          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-gray/30" mt="auto">
-            <Box display="flex" alignItems="center" gap={3}>
+          <Stack display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-gray/30" mt="auto">
+            <Stack display="flex" alignItems="center" gap={3}>
               {timingSummary && (
-                <Box display="flex" alignItems="center" gap={2}>
+                <Stack display="flex" alignItems="center" gap={2}>
                   <Icon icon={LucideCalendar} size={3} color="text-gray-500" />
                   <Text size="xs" color="text-gray-500" font="mono">
                     {timingSummary.split('•')[1]?.trim() || timingSummary}
                   </Text>
-                </Box>
+                </Stack>
               )}
-            </Box>
+            </Stack>
             
             {/* View Arrow */}
-            <Box display="flex" alignItems="center" gap={1} className="group-hover:text-primary-accent transition-colors">
+            <Stack display="flex" alignItems="center" gap={1} className="group-hover:text-primary-accent transition-colors">
               <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">VIEW</Text>
               <Icon icon={LucideChevronRight} size={3} color="text-gray-500" className="transition-transform group-hover:translate-x-0.5" />
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-    </Box>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
   );
 }