Snippet Cards Reviews Block for React

It is typed: each review in REVIEWS has a snippet, the sentence readers found most helpful, copied word for word from its body. Nothing picks it live. The Sheet splits the body around the snippet with indexOf, so keep the snippet an exact piece of the body; if it is not found, the Sheet shows the body without an underline.

Replace REVIEWS at the top of the file, newest first. Each review has an id, name, rating from 1 to 5, an ISO date, a title, a body, a snippet, a variant (the tag on the card) and verified. The count in the header, the "3 of 8" and the phone's "Show 4 more reviews" all come from the length of that list; PHONE_FIRST sets how many cards a phone shows at first.

It slides in from the end of the line, names itself with the review's title and traps focus until closed. Previous and Next wrap around, so you can read all eight without closing it, and the polite line reads the title and the place ("Thin, but it grips, 3 of 8"). Escape and the close button both return focus to the card of the review you last read, even if you stepped away from the one that opened it.

Eight cards two across would leave no variety, and an odd count would leave an empty cell. The first and last take the full row, and the six between them pair up, so every row is full on every screen size. The hairlines between them are the grid's one-pixel gap over a border-coloured background.

One column, the first four cards, then a ghost button that reveals the other four and says "Show fewer reviews" afterwards (aria-expanded and aria-controls are set). The Sheet is full width.

Yes. The Sheet opens from the start side of the line, its close button and chevrons mirror, and dates and counts are isolated so digits keep their order.