Spaces:
Running
Running
File size: 2,893 Bytes
372531f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React, { useState, useEffect } from 'react';
import ImageModal from './ImageModal';
export default function ImagesAlbum({ images }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedImage, setSelectedImage] = useState(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [validImages, setValidImages] = useState(images);
const openModal = (image, index) => {
setSelectedImage(image);
setSelectedIndex(index);
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
setSelectedImage(null);
};
// Handle navigation in modal
const nextImage = () => {
setSelectedIndex((prevIndex) => (prevIndex + 1) % validImages.length);
setSelectedImage(validImages[(selectedIndex + 1) % validImages.length]);
};
const prevImage = () => {
setSelectedIndex((prevIndex) => (prevIndex - 1 + validImages.length) % validImages.length);
setSelectedImage(validImages[(selectedIndex - 1 + validImages.length) % validImages.length]);
};
// Handle broken images by filtering them out
const handleImageError = (brokenImage) => {
setValidImages((prevImages) => prevImages.filter((img) => img !== brokenImage));
};
useEffect(() => {
const imagesToHide = []
const filteredImages = images.filter((img) => !imagesToHide.includes(img));
setValidImages(filteredImages);
}, [images]);
if (validImages.length === 0) return null;
return (
<div className="w-full h-full min-h-[200px] max-h-[400px]">
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-4 pb-4">
{validImages.map((image, index) => (
<div
key={index}
className="relative aspect-square bg-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-300"
>
<img
src={image}
alt={`Image ${index + 1}`}
className="absolute inset-0 w-full h-full object-cover cursor-pointer hover:opacity-90 transition-opacity duration-300"
onClick={() => openModal(image, index)}
onError={() => handleImageError(image)}
/>
</div>
))}
</div>
{selectedImage && (
<ImageModal
imageSrc={selectedImage}
isOpen={isModalOpen}
onClose={closeModal}
onNext={nextImage}
onPrev={prevImage}
/>
)}
</div>
);
} |