import { use, useState } from 'react'; import { useEffect } from 'react'; import Masonry from 'react-masonry-css'; interface GalleryProps { id: number; closeMenu: () => void; } const Gallery = ({ id, closeMenu }: GalleryProps) => { const [isSingle, setIsSingle] = useState(false); const [loaded, setLoaded] = useState({}) const [selectedImage, setSelectedImage] = useState(null); const [images, setImages] = useState([]); const [galleryId, setGalleryId] = useState(id as number); console.log(id) const getData = async () => { const thumbnailResponse = await fetch('/api/galleries/'+String(galleryId)+'/images'); const thumbnailUrl = await thumbnailResponse.json() as string[]; setImages(thumbnailUrl); } const handleDownload = (image: string) => { const link = document.createElement('a'); link.href = image; link.download = 'image.jpg'; // or any other filename link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; useEffect(() => { getData(); if (images.length === 1) { setIsSingle(true); setSelectedImage(images[0]); } }, [selectedImage]); const handleClick = (image: string) => { setSelectedImage(image); }; const breakpointColumnsObj = { default: 3 }; return ( <>
{isSingle ? (
{selectedImage && setSelectedImage(null)} /> }
) : ( <> {selectedImage && <> setSelectedImage(null)} /> } {images.filter(img => img !== selectedImage).map((image, index) => ( handleClick(image)} className={`animate-in hover:scale-105 p-2 cursor-pointer my-2 transition-all opacity-100 duration-500 ease-in-out transform`} /> ))} )}
); } export default Gallery;