website refactor

apps/website/ui/ImagePlaceholder.tsx

@@ -1,39 +1,57 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 import { Icon } from './Icon';
-import { Image as ImageIcon } from 'lucide-react';
+import { Image as ImageIcon, AlertCircle, Loader2 } from 'lucide-react';
+import { Text } from './Text';
 
 export interface ImagePlaceholderProps {
   width?: string | number;
   height?: string | number;
   animate?: 'pulse' | 'none' | 'spin';
   aspectRatio?: string;
+  variant?: 'default' | 'loading' | 'error';
+  message?: string;
 }
 
 export const ImagePlaceholder = ({ 
   width = '100%', 
   height = '100%',
   animate = 'pulse',
-  aspectRatio
+  aspectRatio,
+  variant = 'default',
+  message
 }: ImagePlaceholderProps) => {
+  const icons = {
+    default: ImageIcon,
+    loading: Loader2,
+    error: AlertCircle,
+  };
+
   return (
     <Box 
       width={width} 
       height={height} 
       aspectRatio={aspectRatio}
       display="flex" 
+      flexDirection="col"
       alignItems="center" 
       justifyContent="center" 
       bg="var(--ui-color-bg-surface-muted)"
       style={{ borderRadius: 'var(--ui-radius-md)' }}
+      gap={2}
     >
       <Icon 
-        icon={ImageIcon} 
+        icon={icons[variant]} 
         size={8} 
         intent="low" 
-        animate={animate === 'spin' ? 'spin' : 'none'} 
-        className={animate === 'pulse' ? 'animate-pulse' : ''}
+        animate={variant === 'loading' ? 'spin' : (animate === 'spin' ? 'spin' : 'none')} 
+        className={animate === 'pulse' && variant !== 'loading' ? 'animate-pulse' : ''}
       />
+      {message && (
+        <Text size="xs" variant="low" align="center" paddingX={4}>
+          {message}
+        </Text>
+      )}
     </Box>
   );
 };