image-carousel-basic

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { cn } from "@/lib/utils";
5import {
6  Dialog,
7  DialogClose,
8  DialogContent,
9  DialogDescription,
10  DialogOverlay,
11  DialogPortal,
12  DialogTitle,
13  DialogTrigger,
14} from "@radix-ui/react-dialog";
15import { type EmblaOptionsType } from "embla-carousel";
16import useEmblaCarousel from "embla-carousel-react";
17import {
18  ArrowLeft,
19  ArrowRight,
20  MinusCircle,
21  PlusCircle,
22  X,
23} from "lucide-react";
24import React, { useCallback, useEffect, useState } from "react";
25import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
26 
27type ThumbPropType = {
28  selected: boolean;
29  index: number;
30  onClick: () => void;
31  imgUrl: string;
32  title?: string;
33};
34 
35const getAspectRatioClass = (ratio?: string) => {
36  switch (ratio) {
37    case "square":
38      return "aspect-square"; // 1:1
39    case "video":
40      return "aspect-video"; // 16:9
41    case "wide":
42      return "aspect-4/3"; // 4:3
43    case "auto":
44      return "aspect-auto"; // Natural image aspect ratio
45    default:
46      return "aspect-4/3"; // Default 4:3
47  }
48};
49 
50const ImageContainer: React.FC<{
51  image: { url: string; title?: string };
52  alt: string;
53  fit?: "cover" | "contain" | "fill";
54  aspectRatio?: string;
55  showImageControls?: boolean;
56  classNameImage?: string;
57  classNameThumbnail?: string;
58}> = ({
59  alt,
60  aspectRatio,
61  classNameImage,
62  classNameThumbnail,
63  fit = "cover",
64  image,
65  showImageControls,
66}) => {
67  return (
68    <div
69      className={cn(
70        "relative w-full overflow-hidden rounded-lg bg-gray-100",
71        getAspectRatioClass(aspectRatio)
72      )}
73    >
74      <Dialog>
75        <DialogTrigger asChild>
76          <div className={`cursor-pointer`}>
77            <img
78              src={image.url}
79              alt={image.title || alt}
80              width={400}
81              height={600}
82              className={cn(
83                "absolute inset-0 h-full w-full",
84                fit === "contain" && "object-contain",
85                fit === "cover" && "object-cover",
86                fit === "fill" && "object-fill",
87                classNameThumbnail
88              )}
89            />
90          </div>
91        </DialogTrigger>
92 
93        <DialogPortal>
94          <DialogOverlay className="fixed inset-0 z-50 bg-black/80" />
95          <DialogContent className="bg-background fixed inset-0 z-50 flex flex-col items-center justify-center p-0">
96            <DialogTitle className="sr-only">
97// … truncated