Create image-viewer-modal.tsx

components/modals/image-viewer-modal.tsx

@@ -0,0 +1,60 @@
+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>
+  );
+}