website refactor

apps/website/ui/Avatar.tsx

@@ -1,51 +1,44 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 import { Image } from './Image';
-import { User } from 'lucide-react';
-import { Icon } from './Icon';
+import { Surface } from './primitives/Surface';
 
-export interface AvatarProps {
-  driverId?: string;
-  src?: string;
+interface AvatarProps {
+  src?: string | null;
   alt: string;
   size?: number;
   className?: string;
-  border?: boolean;
 }
 
-export function Avatar({ 
-  driverId, 
-  src, 
-  alt, 
-  size = 40, 
-  className = '',
-  border = true,
-}: AvatarProps) {
-  const avatarSrc = src || (driverId ? `/media/avatar/${driverId}` : undefined);
-
+export function Avatar({ src, alt, size = 40, className = '' }: AvatarProps) {
   return (
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
+    <Surface
+      variant="muted"
       rounded="full"
-      overflow="hidden"
-      bg="bg-charcoal-outline/20"
-      border={border}
+      border
       borderColor="border-charcoal-outline/50"
       className={className}
-      style={{ width: size, height: size, flexShrink: 0 }}
+      w={`${size}px`}
+      h={`${size}px`}
+      flexShrink={0}
+      overflow="hidden"
     >
-      {avatarSrc ? (
+      {src ? (
         <Image
-          src={avatarSrc}
+          src={src}
           alt={alt}
-          className="w-full h-full object-cover"
+          fullWidth
+          fullHeight
+          className="object-cover"
           fallbackSrc="/default-avatar.png"
         />
       ) : (
-        <Icon icon={User} size={size > 32 ? 5 : 4} color="text-gray-500" />
+        <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>
       )}
-    </Box>
+    </Surface>
   );
 }