image-viewer-motion

1import { cn } from "@/lib/utils";
2import {
3  Dialog,
4  DialogTrigger,
5  DialogPortal,
6  DialogOverlay,
7  DialogContent,
8  DialogClose,
9  DialogTitle,
10} from "@radix-ui/react-dialog";
11import { X } from "lucide-react";
12import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
13 
14interface ImageViewerProps {
15  className?: string;
16  classNameImageViewer?: string;
17  classNameThumbnailViewer?: string;
18  imageTitle?: string;
19  imageUrl: string;
20  thumbnailUrl?: string;
21}
22 
23const ImageViewer_Motion = ({
24  className,
25  classNameImageViewer,
26  classNameThumbnailViewer,
27  imageTitle,
28  imageUrl,
29  thumbnailUrl,
30}: ImageViewerProps) => {
31  return (
32    <Dialog>
33      <DialogTrigger asChild>
34        <div className={cn("cursor-pointer", className)}>
35          {/* You can swap this with your preferred image optization technique, like using  next/image */}
36          <img
37            src={thumbnailUrl || imageUrl}
38            alt={`${imageTitle} - Preview`}
39            width={300}
40            height={300}
41            className={cn(
42              "rounded-lg object-cover transition-opacity hover:opacity-90",
43              classNameThumbnailViewer
44            )}
45          />
46        </div>
47      </DialogTrigger>
48      <DialogPortal>
49        <DialogOverlay className="motion-preset-fade motion-duration-150 fixed inset-0 z-50 bg-black/80" />
50        <DialogContent className="bg-background motion-scale-in-[0.5] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-150 motion-duration-150/scale motion-duration-150/translate motion-duration-[0.00s]/rotate fixed inset-0 z-50 flex flex-col items-center justify-center p-0">
51          <DialogTitle className="sr-only">{imageTitle}</DialogTitle>
52          <div className="relative flex h-screen w-screen items-center justify-center">
53            <TransformWrapper
54              initialScale={1}
55              initialPositionX={0}
56              initialPositionY={0}
57            >
58              {() => (
59                <>
60                  <TransformComponent>
61                    {/* You can swap this with your preferred image optization technique, like using  next/image */}
62                    <img
63                      src={imageUrl}
64                      alt={imageTitle}
65                      className={classNameImageViewer}
66                    />
67                  </TransformComponent>
68                </>
69              )}
70            </TransformWrapper>
71            <DialogClose asChild>
72              <button
73// … truncated