101 lines
4.5 KiB
JavaScript
101 lines
4.5 KiB
JavaScript
'use client'
|
|
import Layout from "@/components/layout/Layout"
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { galleryImages } from "@/utils/constant.utils"
|
|
|
|
export default function WhyChooseUs() {
|
|
const itemsPerPage = 6
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
|
|
const indexOfLastImage = currentPage * itemsPerPage
|
|
const indexOfFirstImage = indexOfLastImage - itemsPerPage
|
|
const currentImages = galleryImages.slice(indexOfFirstImage, indexOfLastImage)
|
|
|
|
const totalPages = Math.ceil(galleryImages.length / itemsPerPage)
|
|
|
|
const handlePageChange = (page) => {
|
|
if (page > 0 && page <= totalPages) {
|
|
setCurrentPage(page)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className="gallery-page-section sec-pad-2">
|
|
<div className="auto-container">
|
|
<div className="sec-title centred mb_50">
|
|
<span className="sub-title">Gallery</span>
|
|
<h2>Healing Through Movement</h2>
|
|
</div>
|
|
<div className="row clearfix">
|
|
{currentImages.map((src, index) => (
|
|
<div key={index} className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
|
<div className="gallery-block-one">
|
|
<div className="inner-box">
|
|
<figure className="image-box">
|
|
<img src={src} alt={`gallery-${index}`} loading="lazy" />
|
|
</figure>
|
|
<div className="view-btn">
|
|
<Link href={src} className="lightbox-image" data-fancybox="gallery" aria-label="View btn icon">
|
|
<i className="icon-4"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="pagination-wrapper mt_20 centred">
|
|
<ul className="pagination clearfix">
|
|
{currentPage > 1 && (
|
|
<li className="prev">
|
|
<Link
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handlePageChange(currentPage - 1)
|
|
}}
|
|
aria-label="Gallery left image">
|
|
<img src="/assets/images/gallery/left.png" alt="Previous" />
|
|
</Link>
|
|
</li>
|
|
)}
|
|
|
|
{[...Array(totalPages)].map((_, i) => (
|
|
<li key={i}>
|
|
<Link
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handlePageChange(i + 1)
|
|
}}
|
|
className={currentPage === i + 1 ? "current" : ""}
|
|
aria-label="Gallery list">
|
|
{i + 1}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
|
|
{currentPage < totalPages && (
|
|
<li className="next">
|
|
<Link
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handlePageChange(currentPage + 1)
|
|
}}
|
|
aria-label="Gallery right image">
|
|
<img src="/assets/images/gallery/right.png" alt="Previous" />
|
|
</Link>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|