Zoomable Image

1"use client"
2 
3import Zoom from "react-medium-image-zoom"
4import "react-medium-image-zoom/dist/styles.css"
5import "./zoomable-image.css"
6import { ImageOff } from "lucide-react"
7import { DetailedHTMLProps, ImgHTMLAttributes, useState } from "react"
8 
9export interface ZoomableImageProps
10  extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
11  /** Disable zoom behavior */
12  disabled?: boolean
13  /** Higher quality image src to load when zoomed */
14  zoomSrc?: string
15  /** Offset in pixels from window boundaries when zoomed */
16  zoomMargin?: number
17}
18 
19export default function ZoomableImage({
20  src,
21  alt,
22  className,
23  onLoad,
24  onError,
25  disabled = false,
26  zoomSrc,
27  zoomMargin = 16,
28  ...rest
29}: ZoomableImageProps) {
30  const [hasError, setHasError] = useState(false)
31 
32  if (!src) return null
33 
34  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
35    setHasError(true)
36    onError?.(e)
37  }
38 
39  if (hasError) {
40    return (
41      <div className="aspect-square w-full h-24 flex items-center justify-center rounded-md">
42        <div className="flex flex-col items-center gap-2 text-muted-foreground">
43          <ImageOff strokeWidth={1} className="w-8 h-8" />
44        </div>
45      </div>
46    )
47  }
48 
49  const image = (
50    <img
51      src={src}
52      alt={alt || ""}
53      className={className}
54      onLoad={onLoad}
55      onError={handleError}
56      {...rest}
57    />
58  )
59 
60  if (disabled) {
61    return image
62  }
63 
64  return (
65    <Zoom
66      classDialog="zoomable-image-dialog"
67      zoomMargin={zoomMargin}
68      zoomImg={zoomSrc ? { src: zoomSrc } : undefined}
69    >
70      {image}
71    </Zoom>
72  )
73}