99 lines
3.0 KiB
JavaScript
99 lines
3.0 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";
|
|
|
|
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 filteredProjects = projectsData.filter(
|
|
(project) =>
|
|
project.category &&
|
|
project.category.toLowerCase().includes(activeTab)
|
|
);
|
|
|
|
|
|
return (
|
|
<section className="project-section section-padding fix">
|
|
<div className="container">
|
|
<div className="section-title text-center">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
Our Global Footprint
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt wow">
|
|
<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 wow fadeInUp"
|
|
data-wow-delay={project.delay}
|
|
>
|
|
<div className="project-card-items">
|
|
<div className="project-image">
|
|
{project.images.map((image, index) => (
|
|
<Image
|
|
key={index}
|
|
width={370}
|
|
height={331}
|
|
src={image}
|
|
alt="img"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|