import { X } from "lucide-react"; import React, { useEffect, useState } from "react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent } from "@/components/ui/dialog"; interface Props { open: boolean; onOpenChange: (open: boolean) => void; imgUrls: string[]; initialIndex?: number; } function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: Props) { const [currentIndex, setCurrentIndex] = useState(initialIndex); // Update current index when initialIndex prop changes useEffect(() => { setCurrentIndex(initialIndex); }, [initialIndex]); // Handle keyboard navigation useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (!open) return; switch (event.key) { case "Escape": onOpenChange(false); break; default: break; } }; document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [open, onOpenChange]); const handleClose = () => { onOpenChange(false); }; // Prevent closing when clicking on the image const handleImageClick = (event: React.MouseEvent) => { event.stopPropagation(); }; // Return early if no images provided if (!imgUrls.length) return null; // Ensure currentIndex is within bounds const safeIndex = Math.max(0, Math.min(currentIndex, imgUrls.length - 1)); return ( {/* Close button */}
{/* Image container */}
{`Preview
{/* Screen reader description */}
Image preview dialog. Press Escape to close or click outside the image.
); } export default PreviewImageDialog;