59 lines
2.1 KiB
JavaScript
59 lines
2.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Lightbox from './Lightbox.jsx'; // Assuming Lightbox component will be created
|
|
|
|
export default function ImageGallery({ images }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
|
|
const openLightbox = (index) => {
|
|
setCurrentImageIndex(index);
|
|
setIsOpen(true);
|
|
};
|
|
|
|
const closeLightbox = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const goToNext = () => {
|
|
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
|
|
};
|
|
|
|
const goToPrev = () => {
|
|
setCurrentImageIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative overflow-hidden rounded-lg shadow-md cursor-pointer group"
|
|
onClick={() => openLightbox(index)}
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={`Gallery image ${index + 1}`}
|
|
className="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{isOpen && (
|
|
<Lightbox
|
|
images={images}
|
|
currentIndex={currentImageIndex}
|
|
onClose={closeLightbox}
|
|
onNext={goToNext}
|
|
onPrev={goToPrev}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|