website refactor

apps/website/components/leaderboards/RankMedal.tsx

@@ -1,54 +1,18 @@
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
-import { Icon } from '@/ui/Icon';
-import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/Surface';
-import { Crown, Medal } from 'lucide-react';
+import { RankMedal as UiRankMedal, RankMedalProps } from '@/ui/RankMedal';
 import React from 'react';
 
-interface RankMedalProps {
-  rank: number;
-  size?: 'sm' | 'md' | 'lg';
-  showIcon?: boolean;
-}
-
-export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
-  const isTop3 = rank <= 3;
-  const variant = MedalDisplay.getVariant(rank);
-  
-  const sizePx = {
-    sm: '1.75rem',
-    md: '2rem',
-    lg: '2.5rem',
-  };
-
-  const textSizeMap = {
-    sm: 'xs',
-    md: 'xs',
-    lg: 'sm',
-  } as const;
-
-  const iconSize = {
-    sm: 3,
-    md: 3.5,
-    lg: 4.5,
-  };
+export function RankMedal(props: RankMedalProps) {
+  const variant = MedalDisplay.getVariant(props.rank);
+  const bg = MedalDisplay.getBg(props.rank);
+  const color = MedalDisplay.getColor(props.rank);
 
   return (
-    <Surface 
-      variant="muted"
-      rounded="full"
-      border
-      height={sizePx[size]}
-      width={sizePx[size]}
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-    >
-      {isTop3 && showIcon ? (
-        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} intent={variant as any} />
-      ) : (
-        <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
-      )}
-    </Surface>
+    <UiRankMedal 
+      {...props} 
+      variant={variant as any} 
+      bg={bg} 
+      color={color} 
+    />
   );
 }