129 lines
4.7 KiB
JavaScript
129 lines
4.7 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { caseStudies6 } from "@/data/caseStudies";
|
|
import DropdownSelect from "../common/DropdownSelect";
|
|
const categories = [
|
|
{ label: "All Case" },
|
|
{ label: "Business Consulting" },
|
|
{ label: "Coroporate" },
|
|
{ label: "IT Solution" },
|
|
{ label: "Marketing" },
|
|
{ label: "Startup Consulting" },
|
|
];
|
|
|
|
export default function Portfolio() {
|
|
const [activeCategory, setActiveCategory] = useState("All Case");
|
|
const [filtered, setFiltered] = useState(caseStudies6);
|
|
useEffect(() => {
|
|
if (activeCategory == "All Case") {
|
|
setFiltered(caseStudies6);
|
|
} else {
|
|
setFiltered(caseStudies6.filter((elm) => elm.category == activeCategory));
|
|
}
|
|
}, [activeCategory]);
|
|
|
|
return (
|
|
<div className="wg-listing tf-spacing-25">
|
|
<div className="tf-container">
|
|
<div className="d-flex align-items-center gap_12 mb_95 flex-wrap justify-content-between">
|
|
<div className="tf-project-filter overflow-x-auto">
|
|
{categories.map((category, i) => (
|
|
<div
|
|
key={i}
|
|
className={`tf-btns-filter text-1
|
|
${activeCategory === category.label ? "is--active" : "fw-3"}
|
|
|
|
`}
|
|
onClick={() => setActiveCategory(category.label)}
|
|
>
|
|
<h6>{category.label}</h6>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="d-flex align-items-center text_mono-gray-5 h6 wrap-sort">
|
|
Filter By Years:
|
|
<DropdownSelect
|
|
addtionalParentClass="align-items-center text_mono-gray-5 h6 wrap-sort"
|
|
options={["all", "Lastest", "Oldest", "Title ASC", "Title DESC"]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div id="loadMore" className="parent tf-grid-layout lg-col-2">
|
|
{filtered.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`${item.filterClass} tf-filter-item tf-tab-content loadItem`}
|
|
>
|
|
<div className="case-studies-item v2 style-1 hover-image hover-border border-element">
|
|
<Link href={`/single-project/${item.id}`} className="img-style">
|
|
<Image
|
|
className="lazyload"
|
|
data-src={item.imageSrc}
|
|
alt="case-studies"
|
|
src={item.imageSrc}
|
|
width={item.imageWidth}
|
|
height={item.imageHeight}
|
|
/>
|
|
</Link>
|
|
<div className="content">
|
|
<div className="top d-flex align-items-center justify-content-between mb_17">
|
|
<div className="brand">
|
|
<Image
|
|
alt="brand"
|
|
src={item.brandSrc}
|
|
width={item.brandWidth}
|
|
height={item.brandHeight}
|
|
/>
|
|
</div>
|
|
<Link
|
|
href={`/single-project/${item.id}`}
|
|
className="tf-btn"
|
|
>
|
|
<span className="icon-arrow-top-right" />
|
|
<span className="bg-effect" />
|
|
</Link>
|
|
</div>
|
|
<div className="heading mb_36">
|
|
<h5 className="mb_10 title">
|
|
<Link
|
|
href={`/single-project/${item.id}`}
|
|
className="link"
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</h5>
|
|
<p className="text_mono-gray-7 text-body-3">
|
|
Discover the transformative power of our solutions. Learn
|
|
how we've helped businesses of all sizes overcome
|
|
challenges.
|
|
</p>
|
|
</div>
|
|
<div className="group-number">
|
|
{item.metrics.map((metric, i) => (
|
|
<div key={i} className="wrap-number">
|
|
<h5 className="number fw-5">{metric.value}</h5>
|
|
<p className="font2 text-body-3">{metric.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="wd-load d-flex justify-content-center">
|
|
<button
|
|
id="loadMoreBtn"
|
|
className="tf-btn height-3 btn-primary2 mx-auto mt_32"
|
|
>
|
|
<span>Show More</span>
|
|
<span className="bg-effect" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|