Filter Sort Bar 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 matches, the chips and the order are all worked out from that list. The rows show PAGE matches at a time (five); the line says how many matched, so a visitor knows when the rows are only the first few.

The first number is the rows on screen and the second is how many reviews match the filters, so with no filter on it reads "5 of 14" and with "4 stars and up" on it reads "5 of 9". Sorting reorders the matches and changes which five show. The line is a polite live region, so a screen reader hears the new count after each change without losing its place.

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

An unseen copy of the five tallest reviews sits in the same grid cell as the live rows and the empty state, so the cell is always as tall as a full list. The toolbar's controls have fixed widths, the chip row has a fixed height and scrolls sideways when it must, and Clear keeps its place even while hidden.

Its three presets are buttons that say which one is chosen; picking one applies it, closes the popover and adds a chip ("Last 30 days") you can remove. Escape closes it without a change. The Popover is controlled with open and onOpenChange; its trigger renders the Button with render.

Yes. The toolbar, the chips and the rows follow the page's direction, stars are mirrored so they fill from the start, and counts, dates and phrases with numbers are isolated so their digits keep their order.