website refactor

apps/website/ui/Image.tsx

@@ -1,53 +1,36 @@
-import React, { ImgHTMLAttributes } from 'react';
+import React, { useState } from 'react';
+import { Box, BoxProps } from './primitives/Box';
+import { ImagePlaceholder } from './ImagePlaceholder';
 
-interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+export interface ImageProps extends Omit<BoxProps<'img'>, 'children'> {
   src: string;
   alt: string;
-  width?: number;
-  height?: number;
-  className?: string;
   fallbackSrc?: string;
-  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-  fill?: boolean;
-  fullWidth?: boolean;
-  fullHeight?: boolean;
+  fallbackComponent?: React.ReactNode;
 }
 
-export function Image({ 
+export const Image = ({ 
   src, 
   alt, 
-  width, 
-  height, 
-  className = '', 
-  fallbackSrc, 
-  objectFit, 
-  fill, 
-  fullWidth, 
-  fullHeight, 
+  fallbackSrc,
+  fallbackComponent,
   ...props 
-}: ImageProps) {
-  const classes = [
-    objectFit ? `object-${objectFit}` : '',
-    fill ? 'absolute inset-0 w-full h-full' : '',
-    fullWidth ? 'w-full' : '',
-    fullHeight ? 'h-full' : '',
-    className
-  ].filter(Boolean).join(' ');
+}: ImageProps) => {
+  const [error, setError] = useState(false);
+
+  if (error) {
+    if (fallbackComponent) return <>{fallbackComponent}</>;
+    if (fallbackSrc) return <Box as="img" src={fallbackSrc} alt={alt} {...props} />;
+    return <ImagePlaceholder />;
+  }
 
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      className={classes}
-      onError={(e) => {
-        if (fallbackSrc) {
-          (e.target as HTMLImageElement).src = fallbackSrc;
-        }
-      }}
-      {...props}
+    <Box 
+      as="img" 
+      src={src} 
+      alt={alt} 
+      onError={() => setError(true)} 
+      {...props} 
     />
   );
-}
+};