Paginated List Reviews Block for React

Edit SIZES (the labels and values the Select shows) and the first useState(5) for the default. Changing the size returns to page 1. The number of pages, the "Showing" line and the heading are all computed from REVIEWS and the size, so adding a review needs no other edit.

Up to seven pages it draws every number. Past that it draws seven slots, the first, the last and a window around the current page with an ellipsis on each side it skips, so the pager keeps its width as you move through it. Previous and Next dim and leave the tab order at the ends.

To the "Reviews 6 to 10" heading above the list, so a keyboard or screen reader user lands just before the new reviews. The status line also announces the new range. Page numbers are real links to ?page=n; the click swaps the rows in place.

Every page of the current size is drawn again, unseen, in the same grid cell as the live page, so the cell keeps the height of the tallest page. Changing the page size changes that height on purpose, since you asked for more or fewer rows.

Each review stacks its reviewer above its text, the toolbar puts the Select under the heading at full width and the pager sits under the status line. Pick 3 per page for the shortest scroll.