website refactor

apps/website/components/leaderboards/RankBadge.tsx

@@ -1,15 +1,20 @@
-
-
-import { Box } from '@/ui/primitives/Box';
+import { Badge } from '@/ui/Badge';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface RankBadgeProps {
   rank: number;
-  size?: 'sm' | 'md' | 'lg';
-  showLabel?: boolean;
+  size?: 'sm' | 'md';
 }
 
-export function RankBadge({ rank, size = 'md', showLabel = true }: RankBadgeProps) {
+export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
+  const getVariant = (rank: number): 'warning' | 'primary' | 'info' | 'default' => {
+    if (rank <= 3) return 'warning';
+    if (rank <= 10) return 'primary';
+    if (rank <= 50) return 'info';
+    return 'default';
+  };
+
   const getMedalEmoji = (rank: number) => {
     switch (rank) {
       case 1: return '🥇';
@@ -21,32 +26,12 @@ export function RankBadge({ rank, size = 'md', showLabel = true }: RankBadgeProp
 
   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>
+    <Badge variant={getVariant(rank)} size={size}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+        {medal && <span>{medal}</span>}
+        <Text size="xs" weight="bold">#{rank}</Text>
+      </div>
+    </Badge>
   );
 }