import * as React from "react"; import { LanguageSwitcherBottomSheetLocalePickerFour } from "@/registry/language-switcher-bottom-sheet-locale-picker-four/language-switcher-bottom-sheet-locale-picker-four"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof LanguageSwitcherBottomSheetLocalePickerFour >; type BottomSheetLocaleGroup = NonNullable[number]; const localeGroups: BottomSheetLocaleGroup[] = [ { id: "recommended", title: "Recommended", locales: [ { code: "es-MX", label: "Spanish (Mexico)", nativeName: "Español", region: "LATAM", description: "Localized pricing, tax guidance, and compliance workflows for Mexico.", isFeatured: true, }, { code: "en-US", label: "English (United States)", nativeName: "English", region: "Americas", description: "USD billing, IRS-compliant invoice templates.", isFeatured: true, }, { code: "fr-FR", label: "French (France)", nativeName: "Français", region: "EMEA", description: "GDPR-ready consent flows and SEPA payment messaging.", isFeatured: true, }, ], }, { id: "emea", title: "Europe, Middle East & Africa", locales: [ { code: "de-DE", label: "German", nativeName: "Deutsch", region: "Germany", description: "EUR currency, DIN-compliant invoice formatting.", }, { code: "ar-SA", label: "Arabic (Saudi Arabia)", nativeName: "العربية", region: "KSA", description: "RTL layout, ZATCA-compliant VAT receipts.", isFeatured: true, }, { code: "it-IT", label: "Italian", nativeName: "Italiano", region: "Italy", }, ], }, { id: "apac", title: "Asia-Pacific", locales: [ { code: "ja-JP", label: "Japanese", nativeName: "日本語", region: "Japan", description: "Consumption tax disclosure and katakana field validations.", isFeatured: true, }, { code: "zh-CN", label: "Chinese (Simplified)", nativeName: "简体中文", region: "中国", }, { code: "en-AU", label: "English (Australia)", nativeName: "English", region: "Australia", }, ], }, ]; export function LanguageSwitcherBottomSheetLocalePickerFourDemo() { const [currentLocale, setCurrentLocale] = React.useState("en-US"); const [remembered, setRemembered] = React.useState(false); return (

Geo-detected locale prompt

Show this component when the detected locale differs from the stored preference to nudge users into compliant content.

Current locale:{" "} {currentLocale}

Remembered preference: {remembered ? "Yes" : "No"}

{ setCurrentLocale(nextLocale); setRemembered(options.rememberChoice); console.info("Switched locale to", nextLocale, options); }} onKeepCurrent={async (options) => { setRemembered(options.rememberChoice); console.info("Kept current locale", options); }} onDismiss={() => console.info("Locale prompt dismissed")} bannerTitle="Switch to localized Mexico experience?" bannerDescription="Price lists, email templates, and tax settings adapt for SAT compliance when you use the Mexico locale." switchButtonLabel="Switch to Español" keepButtonLabel="Keep English" />

); } export default LanguageSwitcherBottomSheetLocalePickerFourDemo;

Simple