Localization Footer Block for React

From the file: PRICE_USD is the plan's price in US dollars and each entry of CURRENCIES has a rate, the number of units per dollar. They are example figures and the note under the price says "Indicative rate" and that you are billed in US dollars. Replace them with a call to your own pricing data, or with a table your server renders, before you ship; a footer should never show a rate that nothing backs.

With Intl.NumberFormat, given the country's locale and the currency's code, so "$19.00", "17,48 €", "¥2,850" and "₹1,577.00" each follow their own rules for symbol, separators and decimals. The price is one left-to-right run, so it reads correctly in a right-to-left layout.

Two things: the locale the numbers are written in, and the currency Select, which jumps to the country's usual currency. Changing the currency afterwards keeps the country's number format, so a visitor in Germany can look at the price in dollars written the German way.

Each Select is named ("Country or region", "Currency"), opens with the arrow keys or Enter and closes with Escape. A live line that is empty from the start says "Team plan from 17,48 € a month." once per choice, so the sample is announced without being read twice.

No. The price is one line of fixed height, and the rate note reserves two lines, so a longer rate or a wider symbol never moves the panel or the legal band.

The parts stack: the wordmark and links first, a rule, then the panel with the two Selects side by side from sm and one under the other below it. The legal band stacks under that.