website refactor

apps/website/components/leaderboards/RankMedal.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Crown, Medal } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
+
+interface RankMedalProps {
+  rank: number;
+  size?: 'sm' | 'md' | 'lg';
+  showIcon?: boolean;
+}
+
+export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
+  const isTop3 = rank <= 3;
+  
+  const sizeMap = {
+    sm: '7',
+    md: '8',
+    lg: '10',
+  };
+
+  const textSizeMap = {
+    sm: 'xs',
+    md: 'xs',
+    lg: 'sm',
+  } as const;
+
+  const iconSize = {
+    sm: 3,
+    md: 3.5,
+    lg: 4.5,
+  };
+
+  return (
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      rounded="full" 
+      border 
+      h={sizeMap[size]}
+      w={sizeMap[size]}
+      bg={MedalDisplay.getBg(rank)}
+      color={MedalDisplay.getColor(rank)}
+    >
+      {isTop3 && showIcon ? (
+        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} />
+      ) : (
+        <Text weight="bold" size={textSizeMap[size]}>{rank}</Text>
+      )}
+    </Box>
+  );
+}