82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import { X } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
const CertificationGallerySection = () => {
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
|
|
const images = [
|
|
"/certification/gallery10.jpeg",
|
|
"/certification/gallery5.png",
|
|
"/certification/gallery12.jpeg",
|
|
"/certification/gallery11.jpeg",
|
|
];
|
|
|
|
const handleImageClick = (index) => {
|
|
setSelectedImage(index);
|
|
};
|
|
|
|
const handleClosePopup = () => {
|
|
setSelectedImage(null);
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-8">
|
|
<h2 className="text-3xl sm:text-5xl font-bold mb-6 text-center">
|
|
Chamber of Commerce
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
|
|
{images.slice(0, 3).map((src, index) => (
|
|
<div key={index} className="aspect-w-1 aspect-h-1">
|
|
<Image
|
|
src={src}
|
|
alt={`Gallery image ${index + 1}`}
|
|
// layout="responsive"
|
|
width={500} // Adjust based on your desired image width
|
|
height={500} // Adjust based on your desired image height
|
|
className="object-cover w-full h-full cursor-pointer"
|
|
onClick={() => handleImageClick(index)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="aspect-w-4 aspect-h-2">
|
|
<Image
|
|
src={images[3]}
|
|
alt="Gallery image 5"
|
|
layout="responsive"
|
|
width={800} // Adjust based on your desired image width
|
|
height={400} // Adjust based on your desired image height
|
|
className="object-cover w-full h-full cursor-pointer"
|
|
onClick={() => handleImageClick(4)}
|
|
/>
|
|
</div>
|
|
|
|
{selectedImage !== null && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
|
|
<div className="relative max-w-3xl w-full">
|
|
<Image
|
|
src={images[selectedImage]}
|
|
alt={`Gallery image ${selectedImage + 1}`}
|
|
width={1200} // Adjust based on your desired image width
|
|
height={800} // Adjust based on your desired image height
|
|
className="w-full h-auto"
|
|
/>
|
|
<button
|
|
onClick={handleClosePopup}
|
|
className="absolute top-4 right-4 text-yellow-400"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CertificationGallerySection;
|