Use Case Tab-Filtered Logos Block for React

Edit USE_CASES and CUSTOMERS at the top of the file. A use case has an id, an icon, a name, the line on its trigger, a title and a pitch for its panel, and three steps. A customer names its genre in group, with an icon, a name and a style (an index into STYLES). Keep five customers per genre, so the row is full, and three steps.

The cells are a real tab list named "What you shoot": the arrow keys move between them (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 trigger's name is its genre and its line. Each panel has an h3 for its title, an h4 per step in a numbered list, and the logos in a list named "Customers". Focusing a tab selects it, as on the other libraries, so an arrow key both moves and switches.

Every genre's panel 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. Panels that aren't open are not in the page's accessibility tree twice.

Below sm the trigger cells drop their one-line description and centre an icon over the name, so three still fit across at 320 pixels. The five logos go two across, the last one spanning the row, and the steps stack under the heading.

It ends on the steps, with its own padding inside. The next section draws its top rule along the block's foot, so a bottom rule here would double it, and the column has no bottom padding for the same reason.

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