Verified Toggle Reviews Block for React

Edit TALLY at the top of the file: for each star rating, how many reviews are verified and how many are other. The totals, both averages (in tenths, by whole-number maths: 157 stars over 40 reviews is exactly 3.9, 119 over 31 is 3.8), the stars drawn to the nearest half, the share rated four or more, each row's share by the largest remainder method and the delta line are worked out when the module loads. Nothing is estimated: there are no confidence intervals, only the counts.

It changes which reviews are counted. Every figure, bar and the delta line are recomputed from the same typed counts, and a polite, unseen status line says what is now shown ("Showing 31 verified reviews: average 3.8 out of 5, 68% rated 4 or more."). The switch is named "Verified purchases only" and works with Space. The Switch takes checked and onCheckedChange(checked).

It is the difference of the two averages in tenths of a star, with a direction arrow and words, so the direction never depends on colour. With the switch on it compares the verified average with all reviews; with it off it says what verified purchases alone would be. Both sentences share one cell, so the block does not change height.

The bars are your theme's text colour on a faint track, so the chart reads in every preset, light and dark, and the page's primary colour stays free for its calls to action. The bars share one scale across both states, so the verified view is visibly smaller.

Yes. Rows read star, bar, count, share from the start and bars fill from the start; figures sit in isolating elements. Half stars mirror so they fill from the start too.

The switch drops under the sentence, the two cells stack under a hairline, and the score and the first rows are on the first screen. Nothing scrolls sideways at 320 pixels.