website refactor

apps/website/ui/RankMedal.tsx

@@ -0,0 +1,70 @@
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { Surface } from './Surface';
+import { Crown, Medal } from 'lucide-react';
+import React from 'react';
+
+export interface RankMedalProps {
+  rank: number;
+  size?: 'sm' | 'md' | 'lg';
+  showIcon?: boolean;
+  variant?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'default';
+  bg?: string;
+  color?: string;
+}
+
+/**
+ * RankMedal is a semantic UI component for displaying a rank with a medal icon or number.
+ * It follows the "Modern Precision" theme.
+ */
+export const RankMedal = ({ 
+  rank, 
+  size = 'md', 
+  showIcon = true,
+  variant,
+  bg,
+  color
+}: RankMedalProps) => {
+  const isTop3 = rank <= 3;
+  
+  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,
+  };
+
+  return (
+    <Surface 
+      variant="muted"
+      rounded="full"
+      style={{ 
+        height: sizePx[size],
+        width: sizePx[size],
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid var(--ui-color-border-default)',
+        backgroundColor: bg,
+        color: color
+      }}
+    >
+      {isTop3 && showIcon ? (
+        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size] as any} intent={variant as any} />
+      ) : (
+        <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
+      )}
+    </Surface>
+  );
+};