website refactor

apps/website/components/leaderboards/RankBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/ui/Badge';
+import { RankMedal } from '@/ui/RankMedal';
 import { Text } from '@/ui/Text';
 import { Group } from '@/ui/Group';
 import React from 'react';
@@ -9,32 +9,15 @@ interface RankBadgeProps {
 }
 
 export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
-  const badgeSize = size === 'lg' ? 'md' : size;
-
-  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 '🥇';
-      case 2: return '🥈';
-      case 3: return '🥉';
-      default: return null;
-    }
-  };
-
-  const medal = getMedalEmoji(rank);
+  if (rank <= 3) {
+    return <RankMedal rank={rank} size={size} />;
+  }
 
   return (
-    <Badge variant={getVariant(rank)} size={badgeSize}>
-      <Group gap={1}>
-        {medal && <Text size="xs">{medal}</Text>}
-        <Text size="xs" weight="bold">#{rank}</Text>
-      </Group>
-    </Badge>
+    <Group justify="center" align="center">
+      <Text size={size === 'lg' ? 'md' : 'xs'} weight="bold" variant="low">
+        #{rank}
+      </Text>
+    </Group>
   );
 }