// title: Role Filter Chips with Live Count "use client"; import { SlidersHorizontalIcon } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/registry/default/ui/badge"; import { Toggle } from "@/registry/default/ui/toggle"; const filters = [ { count: 24, id: "design", label: "Design" }, { count: 41, id: "engineering", label: "Engineering" }, { count: 18, id: "product", label: "Product" }, { count: 12, id: "marketing", label: "Marketing" }, { count: 7, id: "leadership", label: "Leadership" }, { count: 9, id: "research", label: "Research" }, ]; export function Pattern() { const [active, setActive] = useState>(new Set()); const toggle = (id: string) => setActive((prev) => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); const totalResults = active.size === 0 ? filters.reduce((sum, f) => sum + f.count, 0) : filters .filter((f) => active.has(f.id)) .reduce((sum, f) => sum + f.count, 0); return (

Filter by role

{totalResults} results {active.size > 0 && ( )}

{filters.map((filter) => { const isActive = active.has(filter.id); return ( toggle(filter.id)} pressed={isActive} size="sm" variant="outline" > {filter.label} {filter.count} ); })}

); }