shadcn.io is not affiliated with official shadcn/ui
Concert Review Music Block for Ark UI
A concert review whose overall rating is the mean of four five-dot criteria, five set highlights that mark songs in the setlist when pressed, the review text and a Helpful vote that counts once.
Installation
Overview
Rate a night by what mattered, with this concert review for React with Ark UI. Gigscore, a live-review site, shows a review of Brass Gardens at the Verdigris Ballroom in a hairline frame with a plus mark on each corner. At the start, the overall Rating is worked out as the mean of four criteria (Sound, Crowd, View, Value), each a five-dot scale with a word such as "Excellent", and under it the short setlist. At the end are the review text, five set highlights as chips that mark that song in the setlist when pressed, and a Toggle "Helpful (31)" that counts your vote once. The status line says how many highlights are marked. It's built from Rating, Toggle and Guides, with a CSS entrance only. For live-music review sites and venue pages.
FAQ
How do I change the criteria and the review?
Edit CRITERIA (an id, a name and a score from 1 to 5), SETLIST (a title and whether pick makes it a highlight chip) and the review text in the component. The overall rating, the word under it and the dots are worked out from the scores by overallTenths, so there is no second number to keep in step.
How is the overall rating worked out?
It is the mean of the four scores, kept in tenths so no decimal is ever added up: 5, 4, 3 and 4 make 40 tenths, shown as 4.0 out of 5. The stars are decoration and are hidden from assistive technology; the figure and the word say the same thing.
What do the highlight chips do?
Each chip is a checkbox. Ticking it marks that song in the setlist column with a check, a heavier title and a tint, and unticking removes the mark. The header of the column and the polite status line say how many are marked ("Highlights: 3 marked").
Does the Helpful vote count only once?
Yes: the toggle adds one to the typed count when pressed and takes it back when pressed again, so you can never vote twice. The vote lives in the tab; a real site would send it with the reviewer's session and ignore a second vote from the same account.