website refactor

apps/website/ui/ImagePlaceholder.tsx

@@ -1,86 +1,39 @@
 import React from 'react';
-import { Image as ImageIcon, AlertCircle, Loader2 } from 'lucide-react';
 import { Box } from './primitives/Box';
 import { Icon } from './Icon';
-import { Text } from './Text';
+import { Image as ImageIcon } from 'lucide-react';
 
 export interface ImagePlaceholderProps {
-  size?: number | string;
+  width?: string | number;
+  height?: string | number;
+  animate?: 'pulse' | 'none' | 'spin';
   aspectRatio?: string;
-  variant?: 'default' | 'error' | 'loading';
-  message?: string;
-  className?: string;
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 }
 
-export function ImagePlaceholder({
-  size = 'full',
-  aspectRatio = '1/1',
-  variant = 'default',
-  message,
-  className = '',
-  rounded = 'md',
-}: ImagePlaceholderProps) {
-  const config = {
-    default: {
-      icon: ImageIcon,
-      color: 'text-gray-500',
-      bg: 'bg-charcoal-outline/20',
-      borderColor: 'border-charcoal-outline/50',
-      animate: undefined as 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'none' | undefined,
-    },
-    error: {
-      icon: AlertCircle,
-      color: 'text-amber-500',
-      bg: 'bg-amber-500/5',
-      borderColor: 'border-amber-500/20',
-      animate: undefined as 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'none' | undefined,
-    },
-    loading: {
-      icon: Loader2,
-      color: 'text-blue-500',
-      bg: 'bg-blue-500/5',
-      borderColor: 'border-blue-500/20',
-      animate: 'spin' as const,
-    },
-  };
-
-  const { icon, color, bg, borderColor, animate } = config[variant];
-
+export const ImagePlaceholder = ({ 
+  width = '100%', 
+  height = '100%',
+  animate = 'pulse',
+  aspectRatio
+}: ImagePlaceholderProps) => {
   return (
-    <Box
-      display="flex"
-      flexDirection="col"
-      alignItems="center"
-      justifyContent="center"
-      w={typeof size === 'string' ? size : undefined}
-      h={typeof size === 'string' ? size : undefined}
-      style={typeof size === 'number' ? { width: size, height: size } : { aspectRatio }}
-      bg={bg}
-      border
-      borderColor={borderColor}
-      rounded={rounded}
-      className={`overflow-hidden ${className}`}
-      gap={2}
-      p={4}
+    <Box 
+      width={width} 
+      height={height} 
+      aspectRatio={aspectRatio}
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      bg="var(--ui-color-bg-surface-muted)"
+      style={{ borderRadius: 'var(--ui-radius-md)' }}
     >
       <Icon 
-        icon={icon} 
-        size={6} 
-        color={color} 
-        animate={animate}
+        icon={ImageIcon} 
+        size={8} 
+        intent="low" 
+        animate={animate === 'spin' ? 'spin' : 'none'} 
+        className={animate === 'pulse' ? 'animate-pulse' : ''}
       />
-      {message && (
-        <Text 
-          size="xs" 
-          color={color} 
-          weight="medium" 
-          align="center"
-          className="max-w-[80%]"
-        >
-          {message}
-        </Text>
-      )}
     </Box>
   );
-}
+};