Filter Overlap Empty Results Error Block for React

A small pure helper takes the filters that are on, makes every pair of them and counts the typed kits that pass both. The empty pair is the one with a count of 0. Here the free kits are all for personal use, so Free and Commercial share nothing, while Free and Last 7 days share 5 and Commercial and Last 7 days share 3. Edit KITS and the counts, the table, the ringed chips and the headline all follow.

Yes. Each is a native button with aria-pressed: solid with a cross while the filter is on, outlined, struck through and with a plus when it is off. Pressing one never changes the chips' places, since a turned-off chip keeps its slot, so it can be turned back on.

The catalog is typed in the file and every control changes only this page's state; the polite status line ("2 filters on, 3 kits match.") is worked out from the chips, so it is always true. In your product, run the filters on your server, and count the pairs there if the catalog is large, then send the counts with the empty result.

No. The results band keeps an unseen copy of the full empty table (all three pairs) in the same cell as the live content, so the list of three kits, a shorter table and the full table all fit the same box.

Reset turns every chip off, so all 24 kits show, newest first, three at a time. When nothing is on, the button stays visible, quiet, and says so if pressed. Restore turns the three chips back on and brings the empty state with them, so the demo can be run again.

The chips sit in one row that scrolls sideways inside its own band, the table keeps its two columns, and the status line, Reset all filters and Restore are pinned to the bottom of the screen until you reach them.