134 lines
4.3 KiB
JavaScript
134 lines
4.3 KiB
JavaScript
"use client";
|
|
import { useState } from "react";
|
|
import { projectsData } from "@/data/projects";
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import AnimatedText from "../common/AnimatedText";
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
|
|
const tabOptions = [
|
|
{ key: "desiccated", label: "Coconut Milk Extraction" },
|
|
{ key: "virgin", label: "Coconut Dryer Projects" },
|
|
{ key: "pare", label: "Coconut Pulverizing & Grinding" },
|
|
];
|
|
|
|
export default function ProjectsData() {
|
|
const [activeTab, setActiveTab] = useState("desiccated");
|
|
const [lightboxOpen, setLightboxOpen] = useState(false);
|
|
const [lightboxImages, setLightboxImages] = useState([]);
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
|
|
// Filtered projects based on active tab
|
|
const filteredProjects = projectsData.filter(
|
|
(project) =>
|
|
project.category &&
|
|
project.category.toLowerCase().includes(activeTab)
|
|
);
|
|
|
|
// Collect unique images from filtered projects
|
|
const displayedImages = Array.from(
|
|
new Set(
|
|
filteredProjects.map((project) => project.images[0]) // Only first image
|
|
)
|
|
);
|
|
|
|
// Open lightbox
|
|
const handleImageClick = (imageSrc) => {
|
|
const index = displayedImages.findIndex((img) => img === imageSrc);
|
|
const slides = displayedImages.map((img) => ({ src: img }));
|
|
setLightboxImages(slides);
|
|
setCurrentImageIndex(index >= 0 ? index : 0);
|
|
setLightboxOpen(true);
|
|
};
|
|
|
|
return (
|
|
<section className="project-section section-padding fix">
|
|
<div className="container">
|
|
<div className="section-title text-center">
|
|
<h6>
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
Our Global Footprint
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt">
|
|
<AnimatedText text=" Featured Turnkey Coconut" />
|
|
<br />
|
|
<AnimatedText text=" Processing Projects" />
|
|
</h2>
|
|
|
|
{/* Tabs */}
|
|
<div className="project-tabs mt-4 d-flex justify-content-center gap-4">
|
|
{tabOptions.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""}`}
|
|
style={{
|
|
border: "none",
|
|
background: "transparent",
|
|
fontSize: "1rem",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{tab.label}
|
|
{activeTab === tab.key && (
|
|
<div
|
|
style={{
|
|
height: "3px",
|
|
backgroundColor: "#ff5502",
|
|
width: "100%",
|
|
position: "absolute",
|
|
bottom: "-4px",
|
|
left: 0,
|
|
borderRadius: "2px",
|
|
}}
|
|
/>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row g-4 mt-5">
|
|
{filteredProjects.map((project) => (
|
|
<div key={project.id} className="col-xl-4 col-lg-6 col-md-6">
|
|
<div className="project-card-items">
|
|
<div
|
|
className="project-image"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => handleImageClick(project.images[0])}
|
|
>
|
|
<Image
|
|
width={370}
|
|
height={331}
|
|
src={project.images[0]}
|
|
alt={project.title}
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
display: "block",
|
|
background: "transparent",
|
|
transition: "none",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox */}
|
|
{lightboxOpen && (
|
|
<Lightbox
|
|
open={lightboxOpen}
|
|
close={() => setLightboxOpen(false)}
|
|
slides={lightboxImages}
|
|
index={currentImageIndex}
|
|
/>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|