({ currentUrl }: LanguagePickerProps)
| 12 | interface LanguagePickerProps { |
| 13 | currentUrl: URL; |
| 14 | } |
| 15 | |
| 16 | /** |
| 17 | * The locale switcher. |
| 18 | * |
| 19 | * Was a `<label>` + hidden `<input type=checkbox>` + `[role=menu]` dropdown |
| 20 | * held open by a CSS sibling selector, painted with a dozen hard-coded |
| 21 | * `gray-*` classes and a `dark:` twin for each. It is now the library's |
| 22 | * Button + Popover: real focus handling, Escape and backdrop dismissal, and 16 |
| 23 | * locales laid out with room to read them instead of squeezed into a 24rem |
| 24 | * dropdown. |
| 25 | */ |
| 26 | export function LanguagePicker({ currentUrl }: LanguagePickerProps) { |
| 27 | const [open, setOpen] = useState(false); |
| 28 | |
| 29 | const currentLang = getLangFromUrl(currentUrl); |
| 30 | const path = currentUrl.pathname |
| 31 | .replace(new RegExp(`^\/${currentLang}$`), "/") |
| 32 | .replace(new RegExp(`^\/${currentLang}\/`), "/"); |
| 33 | |
| 34 | return ( |
| 35 | <> |
| 36 | <Button |
| 37 | variant="ghost" |
| 38 | size="sm" |
| 39 | onClick={() => setOpen(true)} |
| 40 | aria-haspopup="dialog" |
| 41 | aria-expanded={open} |
| 42 | > |
| 43 | {/*<span |
| 44 | className={`fi fis fi-${countryCode(currentLang)} rounded-full`} |
| 45 | aria-hidden="true" |
| 46 | />*/} |
| 47 | <span className="truncate">{languages[currentLang]}</span> |
| 48 | </Button> |
| 49 | |
| 50 | {open && ( |
| 51 | <Popover |
| 52 | open |
| 53 | onOpenChange={setOpen} |
| 54 | closeLabel="Close" |
| 55 | > |
| 56 | <div className="grid grid-cols-2 sm:grid-cols-3 gap-1"> |
| 57 | {Object.entries(languages).map(([lang, label]) => ( |
| 58 | <a |
| 59 | key={lang} |
| 60 | href={`${lang === defaultLang ? "" : `/${lang}`}${path}`} |
| 61 | hrefLang={lang} |
| 62 | lang={lang} |
| 63 | className="inline-flex items-center gap-2 px-3 py-2 rounded-pui truncate" |
| 64 | style={{ |
| 65 | background: |
| 66 | lang === currentLang |
| 67 | ? "var(--pui-overlay-strong)" |
| 68 | : "transparent", |
| 69 | color: |
| 70 | lang === currentLang |
| 71 | ? "var(--pui-fg)" |
nothing calls this directly
no test coverage detected