website refactor

apps/website/components/leaderboards/MedalBadge.tsx

@@ -1,38 +1,10 @@
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Crown } from 'lucide-react';
+import { RankMedal } from '@/ui/RankMedal';
+import React from 'react';
 
 interface MedalBadgeProps {
   position: number;
 }
 
 export function MedalBadge({ position }: MedalBadgeProps) {
-  const getMedalColor = (pos: number) => {
-    switch (pos) {
-      case 1: return 'var(--warning-amber)';
-      case 2: return 'var(--iron-gray)';
-      case 3: return 'var(--amber-600)';
-      default: return 'var(--charcoal-outline)';
-    }
-  };
-
-  const isMedal = position <= 3;
-
-  return (
-    <Stack 
-      h="10" 
-      w="10" 
-      align="center" 
-      justify="center" 
-      rounded="full" 
-      bg={isMedal ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}
-    >
-      {isMedal ? (
-        <Icon icon={Crown} size={5} color={getMedalColor(position)} />
-      ) : (
-        <Text size="lg" weight="bold" color="text-gray-400">#{position}</Text>
-      )}
-    </Stack>
-  );
+  return <RankMedal rank={position} size="md" />;
 }