website refactor

apps/website/components/teams/TeamLeaderboardItem.tsx

@@ -1,10 +1,9 @@
 
 
 import { Crown, Trophy, Users } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamLeaderboardItemProps {
@@ -37,7 +36,7 @@ export function TeamLeaderboardItem({
   medalBorder,
 }: TeamLeaderboardItemProps) {
   return (
-    <Box
+    <Stack
       as="button"
       type="button"
       onClick={onClick}
@@ -56,7 +55,7 @@ export function TeamLeaderboardItem({
       className="last:border-0"
     >
       {/* Position */}
-      <Box
+      <Stack
         w="8"
         h="8"
         display="flex"
@@ -75,10 +74,10 @@ export function TeamLeaderboardItem({
         ) : (
           position
         )}
-      </Box>
+      </Stack>
 
       {/* Team Info */}
-      <Box w="9" h="9" rounded="md" overflow="hidden" bg="bg-deep-graphite" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} flexShrink={0}>
+      <Stack w="9" h="9" rounded="md" overflow="hidden" bg="bg-deep-graphite" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} flexShrink={0}>
         <Image
           src={logoUrl}
           alt={name}
@@ -86,15 +85,15 @@ export function TeamLeaderboardItem({
           height={36}
           style={{ width: '100%', height: '100%', objectFit: 'cover' }}
         />
-      </Box>
-      <Box style={{ flex: 1, minWidth: 0 }}>
+      </Stack>
+      <Stack style={{ flex: 1, minWidth: 0 }}>
         <Text weight="medium" color="text-white" className="truncate" block>
           {name}
         </Text>
         <Stack direction="row" align="center" gap={2} wrap mt={0.5}>
           {category && (
             <Stack direction="row" align="center" gap={1}>
-              <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-500" />
+              <Stack w="1.5" h="1.5" rounded="full" bg="bg-purple-500" />
               <Text size="xs" color="text-purple-400">{category}</Text>
             </Stack>
           )}
@@ -108,20 +107,20 @@ export function TeamLeaderboardItem({
           </Stack>
           {isRecruiting && (
             <Stack direction="row" align="center" gap={1}>
-              <Box w="1.5" h="1.5" rounded="full" bg="bg-performance-green" />
+              <Stack w="1.5" h="1.5" rounded="full" bg="bg-performance-green" />
               <Text size="xs" color="text-performance-green">Recruiting</Text>
             </Stack>
           )}
         </Stack>
-      </Box>
+      </Stack>
 
       {/* Rating */}
-      <Box textAlign="right">
+      <Stack textAlign="right">
         <Text font="mono" weight="semibold" color="text-purple-400" block>
           {typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'}
         </Text>
         <Text size="xs" color="text-gray-500">Rating</Text>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }