website refactor

apps/website/ui/PlaceholderImage.tsx

@@ -1,21 +1,34 @@
-
-
-import { User } from 'lucide-react';
+import React from 'react';
 import { Box } from './primitives/Box';
 import { Icon } from './Icon';
+import { User } from 'lucide-react';
 
 export interface PlaceholderImageProps {
-  size?: number;
+  width?: string | number;
+  height?: string | number;
+  size?: string | number;
   className?: string;
 }
 
-export function PlaceholderImage({ size = 48, className = '' }: PlaceholderImageProps) {
+export const PlaceholderImage = ({ 
+  width, 
+  height,
+  size,
+  className
+}: PlaceholderImageProps) => {
+  const dimension = size || '100%';
   return (
-    <Box
-      className={`rounded-full bg-charcoal-outline flex items-center justify-center ${className}`}
-      style={{ width: size, height: size }}
+    <Box 
+      width={width || dimension} 
+      height={height || dimension} 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      bg="var(--ui-color-bg-surface-muted)"
+      style={{ borderRadius: 'var(--ui-radius-md)' }}
+      className={className}
     >
-      <Icon icon={User} size={6} color="#9ca3af" />
+      <Icon icon={User} size={6} intent="low" />
     </Box>
   );
-}
+};