website refactor

apps/website/ui/RankBadge.tsx

@@ -0,0 +1,52 @@
+
+
+import { Box } from './Box';
+import { Text } from './Text';
+
+interface RankBadgeProps {
+  rank: number;
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+}
+
+export function RankBadge({ rank, size = 'md', showLabel = true }: RankBadgeProps) {
+  const getMedalEmoji = (rank: number) => {
+    switch (rank) {
+      case 1: return '🥇';
+      case 2: return '🥈';
+      case 3: return '🥉';
+      default: return null;
+    }
+  };
+
+  const medal = getMedalEmoji(rank);
+
+  const sizeClasses = {
+    sm: 'text-sm px-2 py-1',
+    md: 'text-base px-3 py-1.5',
+    lg: 'text-lg px-4 py-2'
+  };
+
+  const getRankColor = (rank: number) => {
+    if (rank <= 3) return 'bg-warning-amber/20 text-warning-amber border-warning-amber/30';
+    if (rank <= 10) return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
+    if (rank <= 50) return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+    return 'bg-charcoal-outline/20 text-gray-300 border-charcoal-outline';
+  };
+
+  return (
+    <Box 
+      as="span" 
+      display="inline-flex" 
+      alignItems="center" 
+      gap={1.5} 
+      rounded="md" 
+      border 
+      className={`font-medium ${getRankColor(rank)} ${sizeClasses[size]}`}
+    >
+      {medal && <Text>{medal}</Text>}
+      {showLabel && <Text>#{rank}</Text>}
+      {!showLabel && !medal && <Text>#{rank}</Text>}
+    </Box>
+  );
+}