Tab Counts Tab-Filtered Logos Block for React

From the data. A tab's chip is count, which tabOf sets to the number of customers in its group, and the All tab's is the length of CUSTOMERS; the caption compares it with the number of logos the tab shows. Change a group and both follow. A tab can show fewer logos than it counts (All shows a hand-picked eight of twenty), which is why the caption says "8 of 20".

Edit CUSTOMERS and TABS at the top of the file: a customer has a group, an icon, a name and a style (an index into STYLES), and a tab is tabOf(group, label). Each panel shows up to eight logos in four columns; the cells are set apart, so a panel with six or seven leaves its last row short without a hole in the grid.

The pills are a real tab list named "Customer kind": the arrow keys move between tabs (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. A tab's name includes its count, so a screen reader hears "Product teams 8". The caption and the logos, a list named "Customers", are in the panel. Focusing a tab selects it, as on the other libraries, so an arrow key both moves and switches.

Every tab's panel, caption included, is also rendered once more, unseen, stacked in the same grid cell as the real panel, hidden from assistive technology and the keyboard (aria-hidden and inert). The cell is as tall as the tallest of them, so switching only swaps what shows and nothing below it moves.

The pills sit in a row inside the band that you scroll sideways, so four tabs and their counts fit at 320 pixels. The grid is two across, the cells are bordered boxes, and the overshooting lines are drawn from sm up, where the gaps are wide enough for them.

The header, the band and the grid fade up once when the page loads, and each logo's colour eases on hover. Switching tabs swaps the panel at once. With reduced motion the entrance and the hover transitions are off.