60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
|
import { X, ChevronLeft, ChevronRight } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface ImageViewerModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
imageUrl: string;
|
|
onNavigate?: (direction: 'prev' | 'next') => void;
|
|
}
|
|
|
|
export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: ImageViewerModalProps) {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none">
|
|
<div className="relative w-full h-full">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute -top-10 right-0 p-2 text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
|
|
{onNavigate && (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10"
|
|
onClick={() => onNavigate('prev')}
|
|
>
|
|
<ChevronLeft size={24} />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10"
|
|
onClick={() => onNavigate('next')}
|
|
>
|
|
<ChevronRight size={24} />
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
<div className="relative w-full h-full min-h-[60vh]">
|
|
<Image
|
|
src={imageUrl}
|
|
alt="Full size image"
|
|
fill
|
|
className="object-contain"
|
|
priority
|
|
sizes="90vw"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|