Tag Filter Testimonials Block for React

Edit TOPICS and PEOPLE at the top of the file. Each person names exactly two topics in topics; the tags on their cell, the filter and the count all come from them. A cell is kept when either of its topics is the one picked.

Every tag and the chip are real buttons. A tag says whether it is pressed, so you can tell which topic is active on any cell. Choosing one moves focus to the chip so you can remove the filter at once, and a polite status line reads the result ("Showing 5 of 9 quotes about Types"). Removing the filter moves focus to the line that says all nine quotes are shown, so focus never falls to the top of the page.

The section uses the page spine: Guides bleed marks="top" rules="top" draws the two rails and a top rule that runs to the page's edges, with plus marks. Each cell holds its own Guides extend="sm" marks="start", so its four sides run half a rem past the corners, and the cells sit a rem and a half apart so neighbouring lines never touch. The guides are decorative and take your theme's border and muted-foreground colours.

On a desktop, an unseen copy of all nine cells sits in the same grid cell as the live wall, so the area keeps its full height while the filtered cells leave. The copy is hidden from screen readers and can't take focus. The cells that remain move up to fill the grid, which is the point of a filter.

Below md the wall is one column, cut at about 36rem with a fade, and a ghost "More quotes" button under it (aria-expanded, aria-controls) lifts the cut. From md the wall is two columns and from lg three, all quotes showing. On a phone the wall isn't padded to its full height, so a filter changes the page's length there.

Cells that come back fade in with CSS; with reduced motion they simply appear. In a right-to-left page the grid fills from the right, the guides' plus marks mirror, and each quote keeps its curly marks in place.