feat: implement event submission flow with image upload and modal interface

2026-05-10 21:47:28 +02:00
parent 7db35361d9
commit 197594f84f
31 changed files with 1481 additions and 75 deletions
--- a/components/LightboxImage.tsx
+++ b/components/LightboxImage.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { X, Maximize2 } from 'lucide-react';
+
+interface LightboxImageProps {
+  src: string;
+  alt: string;
+  position?: string;
+  zoom?: number;
+  className?: string;
+}
+
+export default function LightboxImage({ 
+  src, 
+  alt, 
+  position = "50% 50%", 
+  zoom = 1,
+  className = "w-full h-full object-cover" 
+}: LightboxImageProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, []);
+
+  // Prevent scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => { document.body.style.overflow = 'unset'; };
+  }, [isOpen]);
+
+  return (
+    <>
+      <div 
+        className="relative group cursor-zoom-in w-full h-full overflow-hidden"
+        onClick={() => setIsOpen(true)}
+      >
+        <img
+          src={src}
+          alt={alt}
+          className={className}
+          style={{ 
+            objectPosition: position,
+            transform: `scale(${zoom})`,
+            transformOrigin: position
+          }}
+        />
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
+          <div className="bg-white/20 backdrop-blur-md p-3 rounded-full text-white scale-90 group-hover:scale-100 transition-all">
+            <Maximize2 className="w-6 h-6" />
+          </div>
+        </div>
+      </div>
+
+      {/* Lightbox Overlay */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center p-4 md:p-12 animate-in fade-in duration-300"
+          onClick={() => setIsOpen(false)}
+        >
+          <button 
+            className="absolute top-6 right-6 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-[10000]"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsOpen(false);
+            }}
+          >
+            <X className="w-6 h-6" />
+          </button>
+
+          <div 
+            className="relative w-full h-full flex items-center justify-center cursor-zoom-out"
+          >
+            <img
+              src={src}
+              alt={alt}
+              className="max-w-full max-h-full object-contain shadow-2xl animate-in zoom-in-95 duration-300"
+            />
+            
+            {/* Legend / Caption */}
+            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent text-white text-center">
+              <p className="text-lg font-medium">{alt}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}