website refactor

apps/website/ui/Image.tsx

@@ -6,9 +6,22 @@ interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   width?: number;
   height?: number;
   className?: string;
+  fallbackSrc?: string;
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  fill?: boolean;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
 }
 
-export function Image({ src, alt, width, height, className = '', ...props }: ImageProps) {
+export function Image({ src, alt, width, height, className = '', fallbackSrc, objectFit, fill, fullWidth, fullHeight, ...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(' ');
+
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
@@ -16,7 +29,12 @@ export function Image({ src, alt, width, height, className = '', ...props }: Ima
       alt={alt}
       width={width}
       height={height}
-      className={className}
+      className={classes}
+      onError={(e) => {
+        if (fallbackSrc) {
+          (e.target as HTMLImageElement).src = fallbackSrc;
+        }
+      }}
       {...props}
     />
   );