51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import { cn } from "@/lib/utils/cn";
|
||
import type { StoreCategory } from "@/types/api";
|
||
|
||
/** winofyfrontenddoc (1).md §3.5 — horizontal-scroll category filter chips. */
|
||
export function CategoryChips({ categories }: { categories: StoreCategory[] }) {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
const activeUuid = searchParams.get("category");
|
||
|
||
function select(uuid: string | null) {
|
||
const params = new URLSearchParams(searchParams.toString());
|
||
if (uuid) params.set("category", uuid);
|
||
else params.delete("category");
|
||
router.push(params.toString() ? `/?${params.toString()}` : "/");
|
||
}
|
||
|
||
return (
|
||
<div className="flex gap-2 overflow-x-auto px-4 min-h-full my-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => select(null)}
|
||
className={cn(
|
||
"shrink-0 rounded-full px-4 py-2 mb-4 text-body-medium font-medium flex items-center",
|
||
!activeUuid
|
||
? "bg-primary-action text-white"
|
||
: "border border-gray-300 bg-white text-foreground",
|
||
)}
|
||
>
|
||
همه
|
||
</button>
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.uuid}
|
||
type="button"
|
||
onClick={() => select(category.uuid)}
|
||
className={cn(
|
||
"shrink-0 rounded-full px-3 py-2 text-body-medium font-medium flex items-center mb-4",
|
||
activeUuid === category.uuid
|
||
? "bg-primary-action text-white"
|
||
: "border border-gray-300 bg-white text-foreground",
|
||
)}
|
||
>
|
||
{category.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|