Plumber Reviews by Service Area Profile Block for React

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.

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.

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.

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.

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.

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.