diff options
| author | schererleander <leander@schererleander.de> | 2025-12-25 18:09:23 +0100 |
|---|---|---|
| committer | schererleander <leander@schererleander.de> | 2025-12-25 18:09:23 +0100 |
| commit | d7edbf05ab0e90eedcb99e4462e3a61793b2eff9 (patch) | |
| tree | c30d7b7c73f421cf7b722ddfc9c4db3962c30b63 /src/components/Gallery.tsx | |
| parent | a3c2943ebf15890f01634d030e59b7d7fcc9bf1f (diff) | |
remove all files
Diffstat (limited to 'src/components/Gallery.tsx')
| -rw-r--r-- | src/components/Gallery.tsx | 100 |
1 files changed, 0 insertions, 100 deletions
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx deleted file mode 100644 index ffcf0e1..0000000 --- a/src/components/Gallery.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -interface ImageItems { - images: Array<{ - src: string; - alt?: string; - id?: string | number; - }>; -} - -export default function Gallery({ images }: ImageItems) { - const [selectedIndex, setSelectedIndex] = useState<number | null>(null); - const closeModal = () => setSelectedIndex(null); - const prev = (e?: React.MouseEvent) => { - e?.stopPropagation(); - setSelectedIndex((i) => (i !== null && i > 0 ? i - 1 : i)); - }; - const next = (e?: React.MouseEvent) => { - e?.stopPropagation(); - setSelectedIndex((i) => (i !== null && i < images.length - 1 ? i + 1 : i)); - }; - - useEffect(() => { - function handleKeyDown(event: KeyboardEvent) { - if (selectedIndex === null) return; - if (event.key === 'ArrowLeft') { - prev(); - } else if (event.key === 'ArrowRight') { - next(); - } - } - - window.addEventListener('keydown', handleKeyDown); - return () => window.removeEventListener('keydown', handleKeyDown); - }, [selectedIndex, images.length]); - - return ( - <> - <div className="grid gap-2 grid-cols-4 max-sm:grid-cols-3 p-4"> - {images.map((image, idx) => ( - <button - key={image.id ?? image.src} - className="relative overflow-hidden rounded-xl shadow-lg aspect-square group cursor-pointer" - onClick={() => setSelectedIndex(idx)} - > - <img - src={image.src} - alt={image.alt || 'Gallery image'} - className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" - /> - </button> - ))} - </div> - - {/* Overlay */} - {selectedIndex !== null && ( - <div - className="fixed inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50" - onClick={closeModal} - role="dialog" - aria-modal="true" - > - {/* Prev arrow */} - <button - onClick={prev} - className="absolute left-4 text-black dark:text-white text-4xl disabled:opacity-30" - disabled={selectedIndex === 0} - > - ← - </button> - - <img - src={images[selectedIndex].src} - alt={images[selectedIndex].alt || 'Enlarged gallery'} - className="w-2/3 h-2/3 object-contain rounded-lg" - /> - - {/* Next arrow */} - <button - onClick={next} - className="absolute right-4 text-black dark:text-white text-4xl disabled:opacity-30" - disabled={selectedIndex === images.length - 1} - aria-label='Next image' - > - → - </button> - <button - onClick={(e) => { - e.stopPropagation(); - closeModal(); - }} - className="absolute top-4 right-4 text-black dark:text-white text-3xl" - > - × - </button> - </div> - )} - </> - ); -} |
