shadcn.io is not affiliated with official shadcn/ui
Translation View Reviews Block for React Aria
Four sleeping bag reviews written in German, Spanish, French and Dutch as two-column cells with the original beside a typed translation, a Select that picks English, Spanish or French, a Show original switch and a Translation first toggle.
Installation
Overview
A translated-reviews section for React with React Aria, for the Holmbridge Fell 0, a fictional sleeping bag. Four reviews from four countries, written in German, Spanish, French and Dutch, sit in cells that share hairlines. Each cell has the reviewer with a language badge, the country, a "Verified purchase" mark in words, the stars with their value in words and a fixed date; then two columns, the original and the translation, with a line saying "Translated from German into English". A Select at the end of the header picks the language to translate into (English, Spanish or French); a review already in that language shows only itself and says so. A Switch hides the originals, and a Toggle on each cell puts the translation first. Every translation is typed for this demo, and nothing is translated live. It uses Select, Switch, Toggle, Badge, Rating, Avatar and Guides. On a phone the translation sits under the original.
FAQ
Are the translations live?
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.
What happens when the language I pick is the review's own?
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.
The Select is React Aria's, with its label on the Select itself and a selectedKey-style value.
What do Show original and Translation first do?
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.
The Switch and each Toggle go through isSelected and onChange.
Why doesn't the page move when I change the language?
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.