Top Bar Rating Banner Block for React

Edit RATING at the top of the file: score (out of five, any decimal) and count. Every star's fill is worked out from the score (min(1, max(0, score - index))) and set as --fill on the star, so 3.5 draws three full stars and half of the fourth. The count is formatted with a fixed locale so the server and the browser agree; change "en-US" for another style.

Rating is an input: it takes a value and is built to be changed. This strip only shows a score, so a drawing is lighter and keeps the fill exact to a fraction. The filled stars use the foreground colour and the empty ones a faint tone of it, which reads in every theme and keeps the banner free of an amber that no other block uses.

The row of stars is a single image with the text "Rated 4.8 out of 5 stars"; the individual star icons are hidden from them. The sentence after it is plain text, and the link says what it does ("Leave a review") rather than "click here".

Yes. Each star's clipped layer is anchored to the inline start, so in a right-to-left page the partial star fills from its right edge, the direction people read the row. The sentence after the stars sits in a bdi, so the score and the count keep their digits in order.

The stars, the sentence and the link are all inline in one paragraph, so on a 320-pixel screen it takes two lines at most: the stars and most of the sentence on the first, "developers" and the link on the second. The strip grows from 44 to about 68 pixels.