137 lines
6.3 KiB
JavaScript
137 lines
6.3 KiB
JavaScript
'use client';
|
|
import { useState } from "react";
|
|
import 'react-image-lightbox/style.css';
|
|
import Lightbox from 'react-image-lightbox';
|
|
|
|
export default function GalleryLightbox({ images }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [photoIndex, setPhotoIndex] = useState(0);
|
|
|
|
return (
|
|
<>
|
|
<div className="masonry-items-container row no-gutters clearfix">
|
|
|
|
{/* Column 1 */}
|
|
<div className="col-lg-3 col-md-6 col-sm-12">
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
onClick={() => { setPhotoIndex(0); setIsOpen(true); }}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<img src={images[0]} alt="Combos" />
|
|
<div className="overlay-box">
|
|
<h6>Combos</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 2 */}
|
|
<div className="col-lg-3 col-md-6 col-sm-12">
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
onClick={() => { setPhotoIndex(1); setIsOpen(true); }}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<img src={images[1]} alt="Milk Shakes" />
|
|
<div className="overlay-box">
|
|
<h6>Milk Shakes</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
onClick={() => { setPhotoIndex(2); setIsOpen(true); }}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<img src={images[2]} alt="Poutine" />
|
|
<div className="overlay-box">
|
|
<h6>Poutine</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 3 */}
|
|
<div className="col-lg-6 col-md-12 col-sm-12">
|
|
<div className="row no-gutters">
|
|
<div className="col-lg-6 col-md-6 col-sm-12">
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
onClick={() => { setPhotoIndex(3); setIsOpen(true); }}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<img src={images[3]} alt="Salads" />
|
|
<div className="overlay-box">
|
|
<h6>Salads</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-12">
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
onClick={() => { setPhotoIndex(4); setIsOpen(true); }}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<img src={images[4]} alt="Shawarma Wraps" />
|
|
<div className="overlay-box">
|
|
<h6>Shawarma Wraps</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-12 col-md-12 col-sm-12">
|
|
<div className="gallery-block-two masonry-item">
|
|
<div className="inner-box">
|
|
<div
|
|
className="image-box"
|
|
onClick={() => { setPhotoIndex(5); setIsOpen(true); }}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<img src={images[5]} alt="Dosa" />
|
|
<div className="overlay-box">
|
|
<h6>Dosa</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<Lightbox
|
|
mainSrc={images[photoIndex]}
|
|
nextSrc={images[(photoIndex + 1) % images.length]}
|
|
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
|
|
onCloseRequest={() => setIsOpen(false)}
|
|
onMovePrevRequest={() =>
|
|
setPhotoIndex((photoIndex + images.length - 1) % images.length)
|
|
}
|
|
onMoveNextRequest={() =>
|
|
setPhotoIndex((photoIndex + 1) % images.length)
|
|
}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|