Pinned Featured Reviews Block for React

Replace REVIEWS at the top of the file, newest first (each has an id, name, rating, ISO date, title, body and verified), and set START to the ids that begin pinned. The limit is SLOT_COUNT; the slot numbers and the Select's options come from SLOT_NUMBERS, so change both together for four slots.

No. It is local state: pinning, moving and unpinning change the lists and a polite line says what changed, but nothing is sent and a reload starts again from START. To keep it, send the pins array to your own endpoint from the handlers.

The Pin buttons wait ("Slots full") and a Select replaces the "slots free" note above the list. Choose Slot 1, 2 or 3 and every row's button reads "Replace slot N"; press one and that review takes the slot, while the review it replaced goes back into the list. Unpinning, moving or choosing a slot again clears or changes the choice.

To the button you just used, or its neighbour when that button has reached an end and is disabled: after Unpin, to that review's Pin button in the list; after a Pin, to its Unpin button in the slots. Every button is a real button with a name that includes the review's title, so a screen reader hears what it acts on.

The three slots have a fixed height whether filled or empty, and a pinned review keeps its row in the list under a quiet line instead of leaving it. The Select and the "slots free" note share one grid cell for the same reason.

The slots stack above the list, the avatar and secondary lines drop out of the rows, and the buttons wrap under each review. Nothing scrolls sideways at 320 pixels.