CountryLanguagePicker

The country and language picker: a compact trigger reading "Nederland · NL", and a dialog asking for the country first and then a language it is read in, each country with its delivery terms. Saving is a link to the chosen locale, so it needs no router.

import { CountryLanguagePicker } from "@evolve-storefront/layout/country-language-picker";

Preview

DefaultOpen in Storybook ↗

Usage

Switching country keeps the language where the new country offers it.

<CountryLanguagePicker countries={countries} locale="fr-FR" href={pathname} hrefs={alternates.languages} />;

Props

Prop	Type	Description
countries	readonly CountryOption[]	The countries the store sells to, in order, each with the locales it is read in.
locale	string	The locale being read now, such as nl-BE.
href	string	Where switching leads, normally the current path.
hrefs?	Partial<Record<string, string>>	This page's counterpart per locale, as LocaleSwitcher takes it.
renderLink?	((props: LocaleLinkRenderProps) => ReactNode)	Render the Save link with the app's router; a plain <a href> without it. The same renderer LocaleSwitcher takes, so a site passes one function to both.
triggerVariant?	ButtonVariant	The trigger's look; it sits in a top bar, a drawer or a footer.
triggerClassName?	string