shadcn.io is not affiliated with official shadcn/ui
Plumber Reviews by Service Area Profile Block for Radix UI
A plumber profile with reviews by service area: a drawn greyscale map of six zones in three distance rings, each a button with its average rating, and for the chosen zone its reply time, call-out fee and three reviews with stars, the job and the plumber's reply.
Installation
Overview
Show where a tradesperson works and how it went there, with this plumber profile for React with Radix UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the plumber: initials, name, role, place and a badge with the average from every review. The start cell is a drawn greyscale map: a workshop at the centre, three distance rings, six sector zones named for invented districts and, on each sector, a button that shows the zone's name and its average rating. The buttons are native radio buttons, so the zones are one group with arrow keys, and the chosen zone's sector is shaded. The main cell shows the zone: its average, how soon the plumber replies and the call-out fee, then three reviews, each an article with read-only Rating stars, the job, the time on site, the words and the plumber's reply, with an initials Avatar for the reviewer. All six zones sit in one grid cell with the others hidden, so the panel keeps its height. It's built from Rating, Badge, Avatar and Guides, with an inline SVG map and a CSS entrance only. It is a sample record: the plumber, districts and reviews are invented. For a trades directory, a home-services site or any profile whose reviews depend on where the job was.
FAQ
How do I fill it with my own areas and reviews?
Edit ZONES. Each zone has an id, a name, the fee, the minutes to a replyMinutes, the position at of its button on the map in percent, and its reviews: a name, a job, the minutes on site, a whole-number rating from 1 to 5, the review and the plumber's reply. Each zone's average, the average on the badge and the counts are worked out from the reviews, so nothing is typed twice. WEDGES holds the six sector shapes in the same order, drawn in a 280 by 280 box. Keep every zone at three reviews: the panel reserves the room for three.
What do the rings and the sectors mean?
The rings are only a scale: they mark 5, 10 and 15 kilometres from the workshop at the centre. The six sectors are the areas the plumber covers and the fee and the reply time belong to the sector, not to the ring. The drawing is decorative and not to scale: everything it says is also written in the buttons and the detail, so nothing depends on seeing it.
How do I use the map with a keyboard?
The six buttons are one radio group, and one tab stop. Arrow keys move to the next zone in the order drawn, clockwise from the top, and choose it as they go; Tab leaves the map. The chosen zone is announced with its name and average, and a polite line under the map says it again with the review count. The map stays in left-to-right order in a right-to-left layout because it is a drawing.
Is anything real here?
No. The plumber, the districts, the reviews and every figure are invented, and nothing is looked up or sent. Choosing a zone only changes what the page shows. To make it real, load the reviews from your own review store and draw your own service area; keep the average worked out from the reviews you load.
Are the stars accessible?
The stars only draw the rating: each review also says Rated 4 out of 5 in words a screen reader reads, and the stars themselves are hidden from assistive technology. They are drawn in the foreground colour, not gold, so they read the same in every theme, and a half-filled look is never used: the stars are whole. In a right-to-left layout the names and numbers keep their order.
How does it look on a phone?
The map comes first, as wide as the screen allows, with the six zone buttons placed on it; the zone's figures and reviews follow under it in one column. The badge in the person band is hidden below the small breakpoint. Every zone has the same layout, so choosing another never moves the page.