image-viewer-basic

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  Dialog,
6  DialogClose,
7  DialogContent,
8  DialogDescription,
9  DialogOverlay,
10  DialogPortal,
11  DialogTitle,
12  DialogTrigger,
13} from "@radix-ui/react-dialog";
14import { MinusCircle, PlusCircle, X } from "lucide-react";
15import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
16 
17const DEFAULT_PLACEHOLDER_URL =
18  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-2.jpg";
19 
20interface ImageViewerProps {
21  className?: string;
22  classNameImageViewer?: string;
23  classNameThumbnailViewer?: string;
24  imageTitle?: string;
25  imageUrl: string;
26  thumbnailUrl?: string;
27  placeholderUrl?: string;
28  Placeholder?: React.ComponentType<{ className?: string }>;
29  showControls?: boolean;
30}
31 
32const ImageViewer_Basic = ({
33  className,
34  classNameImageViewer,
35  classNameThumbnailViewer,
36  imageTitle,
37  imageUrl,
38  placeholderUrl = DEFAULT_PLACEHOLDER_URL,
39  showControls = true,
40  thumbnailUrl,
41}: ImageViewerProps) => {
42  const handleImgError = (event: React.SyntheticEvent<HTMLImageElement>) => {
43    console.error("Image failed to load", event.currentTarget.src);
44    event.currentTarget.src = placeholderUrl;
45  };
46 
47  return (
48    <Dialog>
49      <DialogTrigger asChild>
50        <div className={cn("cursor-pointer", className)}>
51          {/* You can swap this with your preferred image optization technique, like using  next/image */}
52          <img
53            src={thumbnailUrl || imageUrl}
54            alt={`${imageTitle ?? "Image"} - Preview`}
55            width="100%"
56            className={cn(
57              "h-auto w-full rounded-lg object-contain transition-opacity hover:opacity-90",
58              classNameThumbnailViewer
59            )}
60            onError={handleImgError}
61          />
62        </div>
63      </DialogTrigger>
64      <DialogPortal>
65        <DialogOverlay className="fixed inset-0 z-50 bg-black/80" />
66        <DialogContent className="bg-background fixed inset-0 z-50 flex flex-col items-center justify-center p-0">
67          <DialogTitle className="sr-only">{imageTitle || "Image"}</DialogTitle>
68          <DialogDescription className="sr-only">
69            {imageTitle || "Image"}
70          </DialogDescription>
71          <div className="relative flex h-screen w-screen items-center justify-center">
72            <TransformWrapper
73              initialScale={1}
74              initialPositionX={0}
75              initialPositionY={0}
76            >
77// … truncated