A control strip above a data list combining quick-toggle filter chips, a slot for extra controls like a select or search field, a live-announced result count, and a clear-all action.
"use client";
import { FilterBar } from "@/components/ui/klyv-filter-bar";
import { Card } from "@/components/ui/klyv-filter-bar-utils/card";
import { Surface } from "@/components/ui/klyv-filter-bar-utils/surface";
import { Text } from "@/components/ui/klyv-filter-bar-utils/text";
const filters = [
{ value: "subscriptions", label: "Subscriptions", count: 5 },
{ value: "transfers", label: "Transfers", count: 12 },
{ value: "cashback", label: "Cashback", count: 3 },
{ value: "bills", label: "Bills", count: 7 },
];
export default function FilterBarDemo() {
const active = ["subscriptions"];
const count = filters
.filter((filter) => active.includes(filter.value))
.reduce((total, filter) => total + filter.count, 0);
return (
<Card className="w-full max-w-xl gap-3">
<FilterBar
label="Transaction filters"
filters={filters}
value={active}
onValueChange={() => undefined}
resultCount={count}
resultLabel="transactions"
onClear={() => undefined}
/>
<Surface variant="sunken" padding="md">
<Text size="caption" tone="faint">
The list below would now show{" "}
<strong className="font-bold text-ink">{count}</strong> rows. The
count is a live region, so the change is announced.
</Text>
</Surface>
</Card>
);
}
