Translation View Reviews Block for React

No: they're typed in REVIEWS, each under its target language code, and every cell says "Typed for this demo". There is no translation service, and the page sends nothing anywhere. To translate for real, call your service when the Select changes (or when the page loads) and fill the same shape: a text per review per language. The original text keeps its own lang attribute, so a screen reader pronounces it in its language.

The cell shows only the original and its line says "Written in Spanish: nothing to translate", with no second column and no Translation first toggle. The status line counts how many reviews were translated and how many were already in the language. Add a language by adding an item to TARGETS and a text for it to each review.

Show original off leaves only the translation in each cell; on, you get both columns. Translation first, on each cell, swaps the order of its two columns, so on a phone the translation sits above the original. Both are real controls with a state; the order in the page is the order you read.

An unseen copy of every cell, in each language with both columns, shares the list's grid cell, so the cell is always as tall as the tallest case; the live list sits at its start. The copy is aria-hidden and inert. Hiding the originals leaves a calm gap under the cells instead of pulling the next section up.

Yes. The two columns follow the page's direction, so the original is at the start; dates are wrapped so their digits stay in order, and the stars mirror. A right-to-left original would need its own lang and dir on its text.