@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/components/zoomable-image.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { ImageOff } from 'lucide-react'
+import { DetailedHTMLProps, ImgHTMLAttributes, useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+
+export default function ZoomableImage({
+  src,
+  alt,
+  className,
+  onLoad,
+  onError,
+  disabled = false,
+  objectFit = 'contain',
+  ...rest
+}: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & { disabled?: boolean, objectFit?: 'contain' | 'cover' }) {
+  const [hasError, setHasError] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleEsc = (e: KeyboardEvent) => e.key === 'Escape' && setIsOpen(false)
+    document.addEventListener('keydown', handleEsc)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleEsc)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  if (!src) return null
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    setHasError(true)
+    onError?.(e)
+  }
+
+  if (hasError) {
+    return (
+      <div className="aspect-square w-full h-24 flex items-center justify-center rounded-md">
+        <div className="flex flex-col items-center gap-2 text-muted-foreground">
+          <ImageOff strokeWidth={1} className="w-8 h-8" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full w-full">
+      <img
+        src={src}
+        alt={alt || ''}
+        className={`${className} animate-in fade-in duration-300 w-full h-full object-${objectFit} ${disabled ? '' : 'cursor-zoom-in'}`}
+        onLoad={onLoad}
+        onError={handleError}
+        onClick={() => !disabled && setIsOpen(true)}
+        {...rest}
+      />
+      {isOpen && createPortal(
+        <div
+          className="fixed inset-0 z-50 bg-black/80 overflow-auto cursor-zoom-out"
+          onClick={() => setIsOpen(false)}
+        >
+          <div className="min-h-full min-w-full flex items-center justify-center p-4">
+            <img
+              src={src}
+              alt={alt || ''}
+              className="max-w-none"
+            />
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  )
+}