Reviewer Finder Team Block for React

Edit AREAS and PEOPLE at the top of the file. A person has a name, a role, open (the reviews waiting on them) and scores: one expertise number from 0 to 100 per area, in the order of AREAS. Each area lists the top three by score (SHOWN), and CAPACITY is what the open-reviews bar is measured against. Nothing else needs editing.

Choosing an area always chooses its top-ranked reviewer, so the button never names someone who isn't in the list. After that you can choose any of the three rows, and the button follows. Choosing the area again resets to the top. The button is a link: point #review at your own review request, with the chosen name added if you need it.

The Select is named "Area of the change" and works as your base's Select does. The three reviewers are native radio buttons in a group named Reviewer: Tab enters the group once and the arrow keys move between rows, choosing as they go. A row's name reads the person, their role, their expertise and their open reviews. A polite line above the list says which area it is ranked for.

How many reviews the person has open now, out of CAPACITY: a short bar is a person with room. The bar is decorative; the same figure is written beside it ("2 of 6"), and the expertise is a number too, so nothing depends on how the bar looks.

Everything stacks in reading order: the header and the Select, then the ranked list, then the Shine Button full width, so it is the last thing you reach after choosing. The list keeps its three rows whatever the area, so the page doesn't move when you re-rank.