Image Zoom

1import { Button } from "@/components/ui/button";
2import {
3  Dialog,
4  DialogContent,
5  DialogDescription,
6  DialogHeader,
7  DialogTitle,
8  DialogTrigger,
9} from "@/components/ui/dialog";
10import {
11  IterationCwIcon,
12  MinusIcon,
13  PlusIcon,
14  RotateCwSquareIcon,
15} from "lucide-react";
16import { motion, useMotionValue, useSpring } from "motion/react";
17import Image, { type ImageProps } from "next/image";
18import React from "react";
19 
20export const ImageZoom: React.ComponentType<ImageProps> = (imageProps) => {
21  return (
22    <Dialog>
23      <DialogTrigger asChild>
24        <Button
25          variant="ghost"
26          className="relative size-32 overflow-hidden"
27          size="icon"
28        >
29          <Image
30            {...imageProps}
31            alt={imageProps.alt || ""}
32            layout="fill"
33            className="object-cover"
34          />
35        </Button>
36      </DialogTrigger>
37      <DialogContent className="sm:max-w-[90vw]">
38        <DialogHeader>
39          <DialogTitle>Image Zoom</DialogTitle>
40          <DialogDescription>Image Zoom Description</DialogDescription>
41        </DialogHeader>
42        <ImageZoomManipulator
43          src={imageProps.src.toString()}
44          alt={imageProps.alt || ""}
45        />
46      </DialogContent>
47    </Dialog>
48  );
49};
50 
51export const ImageZoomManipulator: React.ComponentType<
52  React.ComponentProps<typeof motion.img>
53> = (imageProps) => {
54  const [originalDragConstraints, setOriginalDragConstraints] = React.useState({
55    top: 0,
56    left: 0,
57    right: 0,
58    bottom: 0,
59  });
60 
61  const [currentDragConstraints, setCurrentDragConstraints] = React.useState({
62    top: 0,
63    left: 0,
64    right: 0,
65    bottom: 0,
66  });
67 
68  const containerRef = React.useRef<HTMLDivElement | null>(null);
69 
70  const scale = useSpring(1, { visualDuration: 0.3, bounce: 0.35 });
71  scale.on("change", (value) => {
72    setCurrentDragConstraints({
73      top: originalDragConstraints.top * value * 0.7,
74      left: originalDragConstraints.left * value * 0.7,
75      right: originalDragConstraints.right * value * 0.7,
76      bottom: originalDragConstraints.bottom * value * 0.7,
77    });
78  });
79 
80  const rotate = useSpring(0, { visualDuration: 0.35, bounce: 0.2 });
81 
82  const x = useMotionValue(0);
83  const y = useMotionValue(0);
84 
85  const [isMounted, setIsMounted] = React.useState(false);
86 
87  React.useEffect(() => {
88    setIsMounted(true);
89  }, []);
90 
91  return (
92    <motion.div
93      ref={(ref) => {
94        if (containerRef.current) return;
95 
96// … truncated