66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
"use client";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { clients } from "../../datas/clients";
|
|
|
|
export default function FilterableList() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [filter, setFilter] = useState("All");
|
|
|
|
useEffect(() => {
|
|
router.replace(`/portfolio?filter=${filter}`, { scroll: false });
|
|
}, [filter]);
|
|
|
|
useEffect(() => {
|
|
const queryFilter = searchParams.get("filter") || "All";
|
|
setFilter(queryFilter);
|
|
}, [searchParams]);
|
|
|
|
const handleFilterChange = (e) => {
|
|
const newFilter = e.target.value;
|
|
setFilter(newFilter);
|
|
router.replace(`/portfolio?filter=${newFilter}`, { scroll: false });
|
|
};
|
|
return (
|
|
<div>
|
|
{/* Mobile */}
|
|
|
|
<div className="row justify-content-start">
|
|
{clients.map((q) => (
|
|
<div
|
|
className={
|
|
filter === "All" ||
|
|
filter === "Restaurants" ||
|
|
filter === "Startups"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8 mb-3"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href={q.link} className="shine-animate">
|
|
<img
|
|
src={`/assets/img/custom/clients-new/${q.image}`}
|
|
style={{ height: "200px" }}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title" style={{ minHeight: "50px" }}>
|
|
<Link href={q.link}>{q.name}</Link>
|
|
</h4>
|
|
<p>{q.description}</p>
|
|
<Link href={q.link} className="btn">
|
|
View Website
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|