shadcn.io is not affiliated with official shadcn/ui
Reviewer Profile Reviews Block for Ark UI
A reviewer's page for a board-game review site: a profile with figures worked out from her fourteen reviews, her ratings set against everyone's in paired bars, and her latest reviews with a sort Select.
Installation
Overview
A reviewer profile for React with Ark UI, for Sigrun Halvorsen, a fictional reviewer on Meeplehouse, a fictional board-game review site. A compact header sits over one split behind a divider. At the start is her profile: an initials avatar, the month she joined, three figures (reviews written, helpful votes received, average rating) and her badges as words. At the end are her ratings against everyone's, where one line says "She averages 3.6; everyone averages 4.2" and five rows of paired bars show her share of each star rating against the whole site's share, and under them her three latest reviews with a Select that puts them in another order. Each review carries its stars with the value in words, the game, a title, the text, a "Verified purchase" mark in words, a fixed date and how many readers found it helpful. On a phone the profile sits on top and the sections stack. It's built from Avatar, Badge, Select, Rating, Guides and plain CSS bars.
FAQ
Where do the figures come from?
From the typed data at the top of the file. REVIEWS holds all fourteen of her reviews; the review count, the helpful votes (the sum of each review's helpful), her average and her distribution are worked out from it, and her shares add up to 100 by the largest remainder method. EVERYONE holds how many ratings the whole site has at each star, and its average and shares are worked out the same way. Nothing is typed twice, so the sentence and the bars always say the same numbers.
What does the Select change?
Which three of her fourteen reviews show: newest first, highest rated, lowest rated or most helpful. A polite line says what is on screen. Every order is drawn once, unseen, in the same grid cell as the live list, so choosing another order never moves the page.
How do I read the paired bars?
Each row is a star rating. The solid bar is her share of that rating and the lighter bar is the whole site's share, and the numbers are written beside them ("Hers 29%, everyone 50%"). The bars are decorative; a screen reader gets the row's star count and the same two percentages in text.