159 lines
7.9 KiB
JavaScript
159 lines
7.9 KiB
JavaScript
'use client';
|
|
import { useState } from "react";
|
|
import Layout from "@/components/layout/Layout";
|
|
import 'react-image-lightbox/style.css';
|
|
import Lightbox from 'react-image-lightbox';
|
|
|
|
export default function GalleryPage() {
|
|
const images = [
|
|
"/assets/images/home/categories/combos.webp",
|
|
"/assets/images/home/categories/milkshakes.webp",
|
|
"/assets/images/home/categories/poutine.webp",
|
|
"/assets/images/home/categories/salads.webp",
|
|
"/assets/images/home/categories/shawarma.webp",
|
|
"/assets/images/home/categories/dosa.webp"
|
|
];
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [photoIndex, setPhotoIndex] = useState(0);
|
|
|
|
return (
|
|
<Layout
|
|
headerStyle={2}
|
|
footerStyle={2}
|
|
breadcrumbTitle="Gallery"
|
|
bgImage="/assets/images/about/about-banner.webp"
|
|
>
|
|
{/* Gallery Section Two */}
|
|
<section className="gallery-section-two sec-pad" id="gallery">
|
|
<div className="outer-container">
|
|
<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>
|
|
</div>
|
|
</section>
|
|
{/* End Gallery Section Two */}
|
|
|
|
{/* Lightbox */}
|
|
{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)
|
|
}
|
|
/>
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|