website refactor

apps/website/ui/TeamLeaderboardItem.tsx

@@ -0,0 +1,127 @@
+
+
+import { Crown, Users } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Image } from './Image';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface TeamLeaderboardItemProps {
+  position: number;
+  name: string;
+  logoUrl: string;
+  category?: string;
+  memberCount: number;
+  totalWins: number;
+  isRecruiting: boolean;
+  rating?: number;
+  onClick?: () => void;
+  medalColor: string;
+  medalBg: string;
+  medalBorder: string;
+}
+
+export function TeamLeaderboardItem({
+  position,
+  name,
+  logoUrl,
+  category,
+  memberCount,
+  totalWins,
+  isRecruiting,
+  rating,
+  onClick,
+  medalColor,
+  medalBg,
+  medalBorder,
+}: TeamLeaderboardItemProps) {
+  return (
+    <Box
+      as="button"
+      type="button"
+      onClick={onClick}
+      display="flex"
+      alignItems="center"
+      gap={4}
+      px={4}
+      py={3}
+      fullWidth
+      textAlign="left"
+      bg="transparent"
+      border="none"
+      cursor="pointer"
+      borderBottom
+      style={{ borderColor: 'rgba(38, 38, 38, 0.5)' }}
+      className="last:border-0"
+    >
+      {/* Position */}
+      <Box
+        w="8"
+        h="8"
+        display="flex"
+        center
+        rounded="full"
+        style={{ 
+          fontSize: '0.75rem', 
+          fontWeight: 'bold', 
+          border: `1px solid ${medalBorder}`, 
+          backgroundColor: medalBg, 
+          color: medalColor 
+        }}
+      >
+        {position <= 3 ? (
+          <Icon icon={Crown} size={3.5} />
+        ) : (
+          position
+        )}
+      </Box>
+
+      {/* 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}>
+        <Image
+          src={logoUrl}
+          alt={name}
+          width={36}
+          height={36}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      </Box>
+      <Box 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" />
+              <Text size="xs" color="text-purple-400">{category}</Text>
+            </Stack>
+          )}
+          <Stack direction="row" align="center" gap={1}>
+            <Icon icon={Users} size={3} color="var(--text-gray-600)" />
+            <Text size="xs" color="text-gray-500">{memberCount}</Text>
+          </Stack>
+          <Stack direction="row" align="center" gap={1}>
+            <Icon icon={Trophy} size={3} color="var(--text-gray-600)" />
+            <Text size="xs" color="text-gray-500">{totalWins} wins</Text>
+          </Stack>
+          {isRecruiting && (
+            <Stack direction="row" align="center" gap={1}>
+              <Box w="1.5" h="1.5" rounded="full" bg="bg-performance-green" />
+              <Text size="xs" color="text-performance-green">Recruiting</Text>
+            </Stack>
+          )}
+        </Stack>
+      </Box>
+
+      {/* Rating */}
+      <Box 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>
+  );
+}