MemShellParty/web/app/components/image-zoom.tsx

"use client";

import type { ComponentProps } from "react";

import { Image, type ImageProps } from "fumadocs-core/framework";
import Zoom, { type UncontrolledProps } from "react-medium-image-zoom";

import "@/components/image-zoom.css";

export type ImageZoomProps = ImageProps & {
  /**
   * Image props when zoom in
   */
  zoomInProps?: ComponentProps<"img">;

  /**
   * Props for `react-medium-image-zoom`
   */
  rmiz?: UncontrolledProps;
};

function getImageSrc(src: ImageProps["src"]): string {
  if (typeof src === "string") return src;

  if (typeof src === "object") {
    // Next.js
    if ("default" in src) return (src as { default: { src: string } }).default.src;
    return src.src;
  }

  return "";
}

export function ImageZoom({ zoomInProps, children, rmiz, ...props }: ImageZoomProps) {
  return (
    <Zoom
      zoomMargin={20}
      wrapElement="span"
      {...rmiz}
      zoomImg={{
        src: getImageSrc(props.src),
        sizes: undefined,
        ...zoomInProps,
      }}
    >
      {children ?? (
        <Image sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px" {...props} />
      )}
    </Zoom>
  );
}