Top Rated Testimonials Block for Vue

Edit REVIEWS at the top of the file. Each review has its stars, a helpful count, an age in days for the "Newest" sort, and the same age as words in when. The three orders, the average and the "Top rated" badge are derived from those numbers, so nothing is ordered by hand.

"Highest rated" puts the most helpful review first among equal ratings, which is also how the "Top rated" badge is chosen. "Most helpful" and "Newest" sort on one number each.

Guides bleed marks="top" rules="top" on the page column draws the rails and the top rule. The band under the header has its own Guides marks="top" rules="top" sides={false}, and the rows start with a second one, so the summary line sits between two ruled lines with plus marks on the rails; the rows themselves are divided by divide-y. The block ends in its last row without a bottom rule: the next section draws its own top rule.

The sort control is a radio group named "Sort reviews by", with arrow keys between choices. After every change a polite status line reads out, for example "4 reviews, sorted by highest rated". Each review's stars are decorative and read as "Rated 5 out of 5". The stars are in foreground tones, with empty ones in the border colour.

"3 weeks ago" is typed data, not computed on render, so the server and the browser always agree and the block never shows a stale date. Replace them with your own labels or compute them in the server component that feeds the block.

The rows swap order instantly without fading in.

The sort control sits under the header's sentence, the metadata stacks above each review instead of sitting beside it, and the summary line keeps the sort on the start side and the average on the end. At 320 pixels the three choices still fit on one line.