Image Zoom

1"use client";
2 
3import Zoom, {
4  Controlled,
5  type ControlledProps,
6  type UncontrolledProps,
7} from "react-medium-image-zoom";
8 
9import { cn } from "@/lib/utils";
10 
11const classDialog = cn(
12  "[&::backdrop]:hidden",
13  "[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0",
14  "[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all",
15  '[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',
16  '[&_[data-rmiz-modal-overlay="visible"]]:bg-background/80 [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',
17  "[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full",
18  "[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform",
19  "motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none"
20);
21 
22export type ImageZoomProps = UncontrolledProps & {
23  className?: string;
24  backdropClassName?: string;
25};
26 
27export const ImageZoom = ({ className, backdropClassName, ...props }: ImageZoomProps) => (
28  <Wrapper className={className}>
29    <Zoom classDialog={cn(classDialog, backdropClassName)} {...props} />
30  </Wrapper>
31);
32 
33export type ImageZoomControlledProps = ControlledProps & {
34  className?: string;
35  backdropClassName?: string;
36};
37 
38export const ImageZoomControlled = ({
39  className,
40  backdropClassName,
41  ...props
42}: ImageZoomControlledProps) => (
43  <Wrapper className={className}>
44    <Controlled classDialog={cn(classDialog, backdropClassName)} {...props} />
45  </Wrapper>
46);
47 
48const wrapperClasses = cn(
49  "relative",
50  // Ghost placeholder
51  "[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute",
52  // Button base styles
53  "[&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:outline-offset-2",
54// … truncated