Density Switch Testimonials Block for React

The switch writes its value to a data-density attribute on the list. The list's columns, and each cell's padding, text size, avatar, stars and role line, are plain Tailwind variants keyed on that attribute, such as group-data-[density=compact]/density:hidden. There is one set of markup, so changing the density never remounts a cell or loses its place. The hairlines are the one-pixel gap between cells on the border colour, so they stay correct at every column count.

Add an entry to DENSITIES with a label and a value, then add the variant classes for that value where the cells use them. The GRID, CELL, QUOTE_TEXT, STARS_ROW, AVATAR and ROLE strings at the top of the file hold every density-dependent class, so they are the only places to edit. Keep the number of quotes a multiple of 12 so every column count ends on a full row.

The switch is a named group of three radio options: the arrow keys move between them and the choice applies at once. A status line announces the new density and the count of quotes; from md it is also shown beside the switch, and on a phone it is read by screen readers only, since the switch already shows the choice. In Compact and Quotes only, the stars and role are hidden for everyone, screen readers included, as they are not rendered; every cell is still a figure with a blockquote and a figcaption.

The grid is one column, and only the first three quotes show. A ghost button, "Show 9 more quotes", opens the rest; it has aria-expanded and aria-controls, and turns into "Show fewer quotes". From md all twelve show and the button is gone. The switch fits at 320 px, and changing the density on a phone changes the padding, the text and what each cell shows.

Stars are the first thing to go when space is tight: they say less than the words. Only Comfortable shows them, in the text colour (empty ones in the border colour), with a "Rated 5 out of 5" text for screen readers. To keep them in Compact, change STARS_ROW to hide only in quotes.

The block fades up once on load, with plain CSS transitions and no animation library, and the segmented switch slides its highlight to the chosen option. The grid itself re-lays out at once when the density changes. With reduced motion on, the block appears in place and the highlight does not slide. The Shine Button's light only fades in.