79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import Image from 'next/image'
|
||
import styles from './Gallery.module.css'
|
||
import Link from 'next/link'
|
||
|
||
const images = [
|
||
'/images/dish-1.png',
|
||
'/images/dish-2.png',
|
||
'/images/hero-1.png',
|
||
'/images/hero-2.png',
|
||
'/images/hero-3.png',
|
||
'/images/restaurant-interior.png'
|
||
]
|
||
|
||
export default function Gallery() {
|
||
const [lightboxOpen, setLightboxOpen] = useState(false)
|
||
const [currentIndex, setCurrentIndex] = useState(0)
|
||
|
||
const openLightbox = (index: number) => {
|
||
setCurrentIndex(index)
|
||
setLightboxOpen(true)
|
||
}
|
||
|
||
const closeLightbox = () => {
|
||
setLightboxOpen(false)
|
||
}
|
||
|
||
const nextImage = (e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
setCurrentIndex((prev) => (prev + 1) % images.length)
|
||
}
|
||
|
||
const prevImage = (e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
|
||
}
|
||
|
||
return (
|
||
<section className={styles.section}>
|
||
<h2 className={styles.title}>Gallery</h2>
|
||
<div className={styles.grid}>
|
||
{images.map((src, index) => (
|
||
<div
|
||
key={index}
|
||
className={styles.imageWrapper}
|
||
onClick={() => openLightbox(index)}
|
||
>
|
||
<Image
|
||
src={src}
|
||
alt={`Gallery image ${index + 1}`}
|
||
fill
|
||
style={{ objectFit: 'cover' }}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Link href="/gallery" className={styles.button}>View More</Link>
|
||
|
||
{lightboxOpen && (
|
||
<div className={styles.lightbox} onClick={closeLightbox}>
|
||
<div className={styles.lightboxContent} onClick={(e) => e.stopPropagation()}>
|
||
<button className={styles.closeBtn} onClick={closeLightbox}>×</button>
|
||
<button className={`${styles.navBtn} ${styles.prevBtn}`} onClick={prevImage}>‹</button>
|
||
<Image
|
||
src={images[currentIndex]}
|
||
alt="Gallery Preview"
|
||
fill
|
||
style={{ objectFit: 'contain' }}
|
||
/>
|
||
<Link href="/gallery" className={`${styles.navBtn} ${styles.nextBtn}`} onClick={nextImage}>›</Link>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</section>
|
||
)
|
||
}
|