Localization Settings Block for React

Edit the constants at the top. TOTAL is how many strings the source language has, LANGS names each language by its tag and says whether it reads end to start, and START_ROWS gives each one's translated count, whether it is added and whether it is on. SAVED holds the chosen default and one chain per language. The percentages, the counts, the on-totals in the heading and the sentences under the chain are all worked out from those, so nothing is typed twice.

You cannot turn it off: its switch is shown on and locked, with a lock beside it. Choosing another language as the default makes that language the default; if it was off, it is switched on at the same time and the status line says so, and the old default becomes an ordinary language you can turn off. The Default choices are native radios in one group, so the arrow keys move between them.

When a string is missing in the chosen language, the product tries the chain's languages in order and shows the first that has it. The sentence lists the languages that would be used. Off languages are skipped, and a language that has every string ends the chain, so anything after it is marked "Never reached": move English above French and the note says French is never reached because English has every string. If every language in the chain is incomplete, a string missing in all of them shows its key. Move up and Move down are named for the language, stay in place at the ends, and say what moved.

It adds the language to the table, off, with 0% translated, and moves focus to its switch so you can turn it on. Its chain starts as the default language alone. In the demo the new language stays in the page; in your product, create the language on your server first and fill the progress from the response.

Nothing leaves the page. The block keeps the saved setup and the one being edited, counts how many things differ (switches, the default, added languages and chains) and says so in its status line. Save makes the edited copy the saved one and says so in this demo; Discard puts the saved copy back. To make it real, send the changes to your API in the save handler. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.

It is a native table with a caption, column headers and the language as each row's header, and every switch and radio is named for its language. The bar is decorative: the words under it carry the same figure. Below the medium breakpoint each row becomes a card with the language over its progress, then Default and On side by side with their words showing. The status line is a polite live region that is present from the start.