Refactor project structure: update Astro configuration, integrate Tailwind CSS, enhance ContactForm with validation, and improve layout for various pages. Add new Donate and Orphanage pages, and implement responsive design adjustments across components.

2025-06-27 22:49:11 +02:00
parent 81f637b317
commit 9f6fa46227
23 changed files with 2721 additions and 3058 deletions
--- a/src/components/Lightbox.jsx
+++ b/src/components/Lightbox.jsx
@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+
+export default function Lightbox({ images, currentIndex, onClose, onNext, onPrev }) {
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowRight') {
+        onNext();
+      } else if (e.key === 'ArrowLeft') {
+        onPrev();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose, onNext, onPrev]);
+
+  if (!images || images.length === 0) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] bg-black bg-opacity-90 flex items-center justify-center p-4" onClick={onClose}>
+      <div className="relative max-w-5xl max-h-full" onClick={(e) => e.stopPropagation()}> {/* Prevent closing when clicking on image */}
+        <img 
+          src={images[currentIndex]}
+          alt={`Gallery image ${currentIndex + 1}`}
+          className="max-w-full max-h-[80vh] object-contain rounded-lg shadow-xl"
+        />
+
+        {/* Close Button */}
+        <button
+          className="absolute top-4 right-4 text-white text-3xl p-2 rounded-full bg-white/20 hover:bg-white/40 transition-colors duration-200"
+          onClick={onClose}
+          aria-label="Close Lightbox"
+        >
+          &times;
+        </button>
+
+        {/* Navigation Buttons */}
+        {images.length > 1 && (
+          <>
+            <button
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl p-2 rounded-full bg-white/20 hover:bg-white/40 transition-colors duration-200"
+              onClick={onPrev}
+              aria-label="Previous Image"
+            >
+              &lsaquo;
+            </button>
+            <button
+              className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl p-2 rounded-full bg-white/20 hover:bg-white/40 transition-colors duration-200"
+              onClick={onNext}
+              aria-label="Next Image"
+            >
+              &rsaquo;
+            </button>
+          </>
+        )}
+
+        {/* Image Counter */}
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-lg bg-black/50 px-4 py-2 rounded-full">
+          {currentIndex + 1} / {images.length}
+        </div>
+      </div>
+    </div>
+  );
+}