45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
'use client'
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
import { images } from "@/utility/constant.utils";
|
|
import { useState } from "react";
|
|
|
|
export default function Section3() {
|
|
// Show only images with id 1 to 4
|
|
const selectedImages = images.filter(img => +img.id >= 49 && +img.id <= 52);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [index, setIndex] = useState(0);
|
|
|
|
return (
|
|
<div className="about6-section-area sp4">
|
|
<div className="container-fluid">
|
|
<div className="row align-items-center">
|
|
{selectedImages.map((img, i) => (
|
|
<div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
|
|
<div
|
|
className="memory-boxarea pl-3"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => {
|
|
setIndex(i);
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
<div className="image" data-aos="zoom-in" data-aos-duration={1000}>
|
|
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Lightbox
|
|
open={open}
|
|
close={() => setOpen(false)}
|
|
slides={selectedImages}
|
|
index={index}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|