From cb47a8ac7a7990947da3fb9ca656ba780374ca08 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Mon, 17 Mar 2025 20:11:13 +0100
Subject: [PATCH] Create image-viewer-modal.tsx

---
 components/modals/image-viewer-modal.tsx | 60 ++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 components/modals/image-viewer-modal.tsx

diff --git a/components/modals/image-viewer-modal.tsx b/components/modals/image-viewer-modal.tsx
new file mode 100644
index 0000000..0d16c44
--- /dev/null
+++ b/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>
+  );
+} 
\ No newline at end of file