website refactor

apps/website/ui/Avatar.tsx

@@ -1,44 +1,62 @@
 import React from 'react';
-import { Box } from './primitives/Box';
-import { Image } from './Image';
 import { Surface } from './primitives/Surface';
+import { Box } from './primitives/Box';
+import { User } from 'lucide-react';
+import { Icon } from './Icon';
 
-interface AvatarProps {
-  src?: string | null;
-  alt: string;
-  size?: number;
-  className?: string;
+export interface AvatarProps {
+  src?: string;
+  alt?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  fallback?: string;
 }
 
-export function Avatar({ src, alt, size = 40, className = '' }: AvatarProps) {
+export const Avatar = ({ 
+  src, 
+  alt, 
+  size = 'md',
+  fallback 
+}: AvatarProps) => {
+  const sizeMap = {
+    sm: '2rem',
+    md: '3rem',
+    lg: '4rem',
+    xl: '6rem'
+  };
+
+  const iconSizeMap = {
+    sm: 3,
+    md: 5,
+    lg: 8,
+    xl: 12
+  } as const;
+
   return (
-    <Surface
-      variant="muted"
-      rounded="full"
-      border
-      borderColor="border-charcoal-outline/50"
-      className={className}
-      w={`${size}px`}
-      h={`${size}px`}
-      flexShrink={0}
-      overflow="hidden"
+    <Surface 
+      variant="muted" 
+      rounded="full" 
+      style={{ 
+        width: sizeMap[size], 
+        height: sizeMap[size], 
+        overflow: 'hidden',
+        border: '2px solid var(--ui-color-border-default)'
+      }}
     >
       {src ? (
-        <Image
-          src={src}
-          alt={alt}
-          fullWidth
-          fullHeight
-          className="object-cover"
-          fallbackSrc="/default-avatar.png"
+        <img 
+          src={src} 
+          alt={alt} 
+          className="w-full h-full object-cover"
         />
       ) : (
-        <Box fullWidth fullHeight bg="bg-charcoal-outline" display="flex" center>
-          <span className="text-gray-400 font-bold" style={{ fontSize: size * 0.4 }}>
-            {alt.charAt(0).toUpperCase()}
-          </span>
+        <Box center fullWidth fullHeight bg="var(--ui-color-bg-base)">
+          {fallback ? (
+            <span className="text-sm font-bold text-[var(--ui-color-text-med)]">{fallback}</span>
+          ) : (
+            <Icon icon={User} size={iconSizeMap[size]} intent="low" />
+          )}
         </Box>
       )}
     </Surface>
   );
-}
+};