Projects tab updated
This commit is contained in:
parent
225b9ade3d
commit
cdfdd2be13
@ -1,13 +1,76 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { projectsData } from "@/data/projects";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import AnimatedText from "../common/AnimatedText";
|
||||
|
||||
const tabOptions = [
|
||||
{ key: "desiccated", label: "Desiccated Coconut" },
|
||||
{ key: "virgin", label: "Virgin Coconut Oil" },
|
||||
{ key: "pare", label: "Pare Water Processing" },
|
||||
];
|
||||
|
||||
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="row g-4">
|
||||
{projectsData.map((project) => (
|
||||
<div className="section-title text-center">
|
||||
<h6 className="wow fadeInUp">
|
||||
<i className="fa-regular fa-arrow-left-long" />
|
||||
Projects
|
||||
<i className="fa-regular fa-arrow-right-long" />
|
||||
</h6>
|
||||
<h2 className="splt-txt wow">
|
||||
<AnimatedText text="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"
|
||||
@ -25,22 +88,6 @@ export default function ProjectsData() {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="project-content">
|
||||
<h3>
|
||||
<Link href={`/project-details/${project.id}`}>
|
||||
{project.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{project.description}</p>
|
||||
</div>
|
||||
<div className="shape-img">
|
||||
<Image
|
||||
src="/assets/img/project/shape.png"
|
||||
width={57}
|
||||
height={54}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
175
data/projects.js
175
data/projects.js
@ -192,43 +192,200 @@ export const projects3 = [
|
||||
|
||||
|
||||
export const projectsData = [
|
||||
// Tab 1 - Desiccated Coconut
|
||||
{
|
||||
id: 1,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "1",
|
||||
title: "Project 1",
|
||||
delay: ".2s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "2",
|
||||
title: "Project 2",
|
||||
delay: ".4s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "3",
|
||||
title: "Project 3",
|
||||
delay: ".6s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
{
|
||||
id: 4,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "4",
|
||||
title: "Project 4",
|
||||
delay: ".2s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "5",
|
||||
title: "Project 5",
|
||||
delay: ".4s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "6",
|
||||
title: "Project 6",
|
||||
delay: ".6s",
|
||||
}
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 7",
|
||||
delay: ".2s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 8",
|
||||
delay: ".4s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 9",
|
||||
delay: ".6s",
|
||||
category: "Desiccated Coconut",
|
||||
},
|
||||
|
||||
// Tab 2 - Virgin Coconut Oil
|
||||
{
|
||||
id: 10,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 10",
|
||||
delay: ".2s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 11",
|
||||
delay: ".4s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 12",
|
||||
delay: ".6s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 13",
|
||||
delay: ".2s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 14",
|
||||
delay: ".4s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 15",
|
||||
delay: ".6s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 16",
|
||||
delay: ".2s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 17",
|
||||
delay: ".4s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 18",
|
||||
delay: ".6s",
|
||||
category: "Virgin Coconut Oil",
|
||||
},
|
||||
|
||||
// Tab 3 - Pare Water Processing
|
||||
{
|
||||
id: 19,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 19",
|
||||
delay: ".2s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 20",
|
||||
delay: ".4s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 21",
|
||||
delay: ".6s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 22",
|
||||
delay: ".2s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 23",
|
||||
delay: ".4s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 24",
|
||||
delay: ".6s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
|
||||
title: "Project 25",
|
||||
delay: ".2s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
|
||||
title: "Project 26",
|
||||
delay: ".4s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
|
||||
title: "Project 27",
|
||||
delay: ".6s",
|
||||
category: "Pare Water Processing",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const allProjects = [...projectItems, ...projects, projects2, projects3];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user