website refactor

apps/website/ui/Avatar.tsx

@@ -1,27 +1,51 @@
-/**
- * Avatar
- *
- * Pure UI component for displaying driver avatars.
- * Renders an image with fallback on error.
- */
+import React from 'react';
+import { Box } from './Box';
+import { Image } from './Image';
+import { User } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface AvatarProps {
-  driverId: string;
+  driverId?: string;
+  src?: string;
   alt: string;
+  size?: number;
   className?: string;
+  border?: boolean;
 }
 
-export function Avatar({ driverId, alt, className = '' }: AvatarProps) {
+export function Avatar({ 
+  driverId, 
+  src, 
+  alt, 
+  size = 40, 
+  className = '',
+  border = true,
+}: AvatarProps) {
+  const avatarSrc = src || (driverId ? `/media/avatar/${driverId}` : undefined);
+
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={`/media/avatar/${driverId}`}
-      alt={alt}
-      className={`w-10 h-10 rounded-full object-cover ${className}`}
-      onError={(e) => {
-        // Fallback to default avatar
-        (e.target as HTMLImageElement).src = '/default-avatar.png';
-      }}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/20"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {avatarSrc ? (
+        <Image
+          src={avatarSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackSrc="/default-avatar.png"
+        />
+      ) : (
+        <Icon icon={User} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
   );
-}
+}