Recommendation Rate Reviews Block for React

Edit SPANS at the top of the file: for each tab an id, a label, a period phrase for the sentence, how many owners said yes and no, and the most common reason for a no. The figure, the bar, the owner counts on the tabs, the share for all owners and the gap are worked out from those counts when the module loads. Percentages are whole numbers by the largest remainder method, so a tab's yes and no always add up to 100.

They are the catalog Tabs: The arrow keys move between tiles (the keys flip in right-to-left layouts), Home and End jump to the first and last, and the chosen tab's panel holds the sentence, the gap and the reason. The figure and the bar are beside the panel and hidden from assistive technology, because the sentence says the same numbers. An unseen copy of every tab's text shares the panel's cell, so the tallest sets the height and switching never moves the page. Tabs are controlled: value and onValueChange, with value on each trigger and panel; they select on focus.

It marks the share of all 261 owners who would recommend the mattress (82%), so each tab's bar can be read against it. The gap is also written out: an arrow up or down and "3 points below everyone", so direction never relies on colour or on the tick alone.

A recommend rate is a plain share, not a verdict. The bar's yes part is your theme's text colour at full strength and the no part a faint step of it, the tick is solid, and direction is an arrow and a word. That keeps the page's primary colour for its calls to action and works in every theme.

Tabs, text and arrows follow the page's direction. The two-part bar and its tick are a chart on a fixed scale, so they stay left to right with the percentages written under them; every figure sits in its own isolating element.

The three tiles share the width (the longest label wraps onto two lines), and the figure comes first, then the words. The rolling number and bar stay within the first screen, and nothing scrolls sideways at 320 pixels.