105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
'use client';
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { locations, locationsItem } from "@/utils/constant.utils";
|
|
|
|
export default function PortfolioFilter1() {
|
|
const [activeCategory, setActiveCategory] = useState("all");
|
|
|
|
const filteredItems =
|
|
activeCategory === "all"
|
|
? locationsItem
|
|
: locationsItem.filter(item =>
|
|
Array.isArray(item.categories) && item.categories.includes(activeCategory)
|
|
);
|
|
|
|
const firstRow = locations.slice(0, 3);
|
|
const secondRow = locations.slice(3, 7);
|
|
|
|
const getButtonStyle = (key) => {
|
|
if (activeCategory === key) {
|
|
return {
|
|
cursor: "pointer",
|
|
backgroundColor: "#bc0000",
|
|
color: "#fff",
|
|
border: "1px solid #bc0000",
|
|
};
|
|
} else {
|
|
return {
|
|
cursor: "pointer",
|
|
color: "black",
|
|
border: "1px solid #102548",
|
|
backgroundColor: "transparent",
|
|
};
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="news-section">
|
|
<div className="auto-container">
|
|
|
|
<div className="filters centred mb_60">
|
|
<ul className="filter-tabs filter-btns clearfix" style={{ marginBottom: "15px" }}>
|
|
{firstRow.map((cat) => (
|
|
<li
|
|
key={cat.key}
|
|
className={`filter`}
|
|
onClick={() => setActiveCategory(cat.key)}
|
|
style={getButtonStyle(cat.key)}
|
|
>
|
|
{cat.label}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<ul className="filter-tabs filter-btns clearfix">
|
|
{secondRow.map((cat) => (
|
|
<li
|
|
key={cat.key}
|
|
className={`filter`}
|
|
onClick={() => setActiveCategory(cat.key)}
|
|
style={getButtonStyle(cat.key)}
|
|
>
|
|
{cat.label}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="row clearfix">
|
|
{filteredItems.length > 0 ? (
|
|
filteredItems.map((item, i) => (
|
|
<div key={item.id} className="col-lg-4 col-md-6 col-sm-12 news-block">
|
|
<div
|
|
className="news-block-one wow fadeInUp animated"
|
|
data-wow-delay={`${i * 300}ms`}
|
|
data-wow-duration="1500ms"
|
|
>
|
|
<div className="inner-box">
|
|
<div className="lower-content2">
|
|
<h2 className="mb-3" style={{ color: "#bc0000" }}>
|
|
{item.title || "Gallery Title"}
|
|
</h2>
|
|
<div
|
|
dangerouslySetInnerHTML={{
|
|
__html: item.description
|
|
? item.description
|
|
: "This is a short description of the gallery item.",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="col-12 centred">
|
|
<p>No items found in this category.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|