| 1 | export function HistoryFilterSelect({ |
| 2 | label, |
| 3 | options, |
| 4 | value, |
| 5 | onChange, |
| 6 | }: { |
| 7 | label: string; |
| 8 | options: { id: string; label: string; count: number }[]; |
| 9 | value: string; |
| 10 | onChange: (next: string) => void; |
| 11 | }) { |
| 12 | const visibleOptions = options.filter((option) => option.id === "all" || option.id === value || option.count > 0); |
| 13 | return ( |
| 14 | <div className="history-filter" role="group" aria-label={label}> |
| 15 | {visibleOptions.map((option) => ( |
| 16 | <button |
| 17 | key={option.id} |
| 18 | type="button" |
| 19 | className={`history-filter__pill${value === option.id ? " history-filter__pill--on" : ""}`} |
| 20 | aria-pressed={value === option.id} |
| 21 | disabled={option.id !== "all" && option.count === 0} |
| 22 | onClick={() => onChange(option.id)} |
| 23 | > |
| 24 | {option.label} |
| 25 | <span className="history-filter__count">{option.count}</span> |
| 26 | </button> |
| 27 | ))} |
| 28 | </div> |
| 29 | ); |
| 30 | } |
| 31 |