website refactor

apps/website/ui/Avatar.tsx

@@ -6,37 +6,43 @@ import { Surface } from './Surface';
 export interface AvatarProps {
   src?: string;
   alt?: string;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'sm' | 'md' | 'lg' | 'xl' | number;
   fallback?: string;
+  className?: string;
 }
 
 export const Avatar = ({ 
   src, 
   alt, 
   size = 'md',
-  fallback 
+  fallback,
+  className
 }: AvatarProps) => {
-  const sizeMap = {
+  const sizeMap: Record<string, string> = {
     sm: '2rem',
     md: '3rem',
     lg: '4rem',
     xl: '6rem'
   };
 
-  const iconSizeMap = {
+  const iconSizeMap: Record<string, number> = {
     sm: 3,
     md: 5,
     lg: 8,
     xl: 12
-  } as const;
+  };
+
+  const finalSize = typeof size === 'number' ? `${size / 4}rem` : sizeMap[size];
+  const finalIconSize = typeof size === 'number' ? Math.round(size / 8) : iconSizeMap[size];
 
   return (
     <Surface 
       variant="muted" 
       rounded="full" 
+      className={className}
       style={{ 
-        width: sizeMap[size], 
-        height: sizeMap[size], 
+        width: finalSize, 
+        height: finalSize, 
         overflow: 'hidden',
         border: '2px solid var(--ui-color-border-default)'
       }}
@@ -52,7 +58,7 @@ export const Avatar = ({
           {fallback ? (
             <span className="text-sm font-bold text-[var(--ui-color-text-med)]">{fallback}</span>
           ) : (
-            <Icon icon={User} size={iconSizeMap[size]} intent="low" />
+            <Icon icon={User} size={finalIconSize as any} intent="low" />
           )}
         </Box>
       )}