You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
732 B
TypeScript
27 lines
732 B
TypeScript
/** Saved-views-lite: a pill row that filters a list by one dimension. */
|
|
|
|
export interface ChipDef { key: string; label: string; count?: number }
|
|
|
|
export function FilterChips(props: {
|
|
chips: ChipDef[]
|
|
active: string
|
|
onChange: (key: string) => void
|
|
}) {
|
|
return (
|
|
<div className="wf-chips" role="group">
|
|
{props.chips.map((c) => (
|
|
<button
|
|
key={c.key}
|
|
type="button"
|
|
aria-pressed={c.key === props.active}
|
|
className={`wf-chip${c.key === props.active ? ' active' : ''}`}
|
|
onClick={() => props.onChange(c.key)}
|
|
>
|
|
{c.label}
|
|
{c.count !== undefined && <span className="count">{c.count}</span>}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|