shadcn.io is not affiliated with official shadcn/ui
Course Education Reviews Block for Solid
Fifteen reviews of a hand-lettering course with a module list that filters them, a difficulty badge, the instructor's stars, the share who would recommend and learners' skill before and after.
Installation
Overview
A course reviews section for Solid with Ark UI, for Hatchwork, a fictional hand-lettering course. A start-aligned header gives the count, then a split behind a divider. At the start is the module list, a single-choice group of "All modules" and the five modules, each with the share of learners who finish it and its review count; on a phone it becomes a Select. At the end is a pane for the chosen module: its name and a difficulty badge, three figures worked out from its reviews (the instructor's stars, the share who would recommend the course, and the learners' own skill before and after as two bars), a polite line saying what shows, and the three newest reviews as ruled rows. An unseen copy of every choice shares the pane's cell, so the page never moves. It's built from ToggleGroup, Select, Rating, Badge, Avatar and Guides.
FAQ
Where do the instructor, recommend and skill figures come from?
From the typed REVIEWS array. Each review carries the instructor's score, whether the learner would recommend the course, and a self-rated skill before and after (1 to 5). The pane averages the reviews of the chosen module, one decimal by integer maths, and counts the yes answers for the share. The finish rates beside each module are typed data. Edit the arrays at the top of the file to use your own.
What does choosing a module change?
The pane: the heading, the difficulty badge, the three figures, the status line and the three newest reviews of that module. "All modules" shows the whole course, with the module named on each review. An unseen copy of every choice keeps the height, so nothing below moves.
How does the module list work from the keyboard?
It is a single-choice group: arrow keys move between the modules and choose them, Home and End go to the first and last, and one module is always chosen. On a phone the Select does the same job and keeps the same choice.
What do the skill bars mean?
They are the learners' own ratings of their skill before the module and after it, out of 5, averaged over the reviews shown. They are self-reported, and each review also prints its own pair ("Skill 2 to 4 of 5").