Advanced Sort Reviews Block for React

Replace REVIEWS at the top of the file. Each review has an id, name, rating from 1 to 5, an ISO date, a title, a body, a helpful count and a verified flag. The average, the count, the chips, the matches and the order are all worked out from that list. The list shows PAGE matches at a time (four); raise it if your page has room, or add a "Show more" button of your own.

From a typed date, AS_OF, not from the visitor's clock, so the block reads the same on every server and in every screenshot. The window is worked out with UTC date arithmetic: 30 or 90 days before AS_OF, compared with each review's ISO date. Change AS_OF to today's date, or compute it on the server, once your reviews are live.

An unseen copy of the four tallest reviews sits in the same grid cell as the live list and the empty state, so the cell is always as tall as a full page of results. The chip row has a fixed height and scrolls sideways when many chips are on, and the status line and Reset button keep their places. Sorting changes which four show and in what order; nothing below the block moves.

Below the large breakpoint the panel isn't drawn on the page. A "Filters (n)" button opens the same five controls in a Sheet that rises from the bottom (a bottom edge, so it reads the same in a right-to-left page), with Reset and Done buttons at its foot. The list behind it updates as you choose, and the live line is read out politely either way. The Sheet takes open and onOpenChange, and its trigger renders the Button with render.

The pills are a multiple-choice toggle group: press 5 and 4 and the list shows reviews of either rating, with a chip for each. Pressing a chip's button takes that one star off and puts focus on the chip row; pressing a pill again does the same. With no star on, every rating shows. The sort key and order are not filters, so they never make a chip.

Yes. The panel, the chips and the review columns follow the page's direction, the order arrows point up and down so they never need mirroring, stars are mirrored so they fill from the start, and counts, dates and phrases with numbers are isolated so their digits keep their order.