shadcn.io is not affiliated with official shadcn/ui
Location Based Reviews Block for Ark UI
A branch ranking for a coworking chain: six cities as accordion rows with the average, count and reply share worked out from star counts, a rating or volume ranking, and each branch's reviews.
Installation
Overview
A branch ranking for React with Ark UI, for Quoinhall Workspaces, a fictional coworking chain with six branches (the cities are real, the chain is invented). A start-aligned header gives the number of branches and reviews and carries a two-choice group at its end that ranks them by rating or by volume. Under a rule with + marks, the branches are accordion rows rail to rail: its rank, the city, half-star stars with the average, the review count and the share of reviews the team replied to, all worked out from each branch's star counts. Opening a row shows two of that branch's reviews as articles on a shared hairline. On a phone the figures wrap under the city. There is no map. It's built from Accordion, ToggleGroup, Rating, Avatar and Guides.
FAQ
Where do the averages and shares come from?
From each branch's typed tally, its review count at each star rating, five stars first. The count is the sum, the average is every star given over that count (one decimal, by integer maths), and the reply share is the replied count over the review count. Edit BRANCHES at the top of the file to use your own.
What does the ranking choice do?
It re-orders the rows by highest average or by most reviews, with ties going alphabetically by city, and the rank numbers follow. Open rows stay open as they move, and a polite line says which branch comes first.
How does the accordion behave?
One branch is open at a time and the open one can be closed again. Tab reaches each row button, Enter and Space open a row, and some libraries also move between rows with the arrow keys. Each row sits in a real heading so screen readers can jump between branches.
Why only two reviews per branch?
They are a sample, not the whole set: the row's count comes from the star counts and says how many exist. The two typed reviews per branch show what a review there looks like, one of them often critical.