File size: 1,354 Bytes
5f24abe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | import { For, createSignal } from "solid-js"
import { useLocation, useNavigate } from "@solidjs/router"
import { Dropdown, DropdownItem } from "~/component/dropdown"
import { useLanguage } from "~/context/language"
import { route, strip } from "~/lib/language"
import "./language-picker.css"
export function LanguagePicker(props: { align?: "left" | "right" } = {}) {
const language = useLanguage()
const navigate = useNavigate()
const location = useLocation()
const [open, setOpen] = createSignal(false)
return (
<div data-component="language-picker">
<Dropdown
trigger={language.label(language.locale())}
align={props.align ?? "left"}
open={open()}
onOpenChange={setOpen}
>
<For each={language.locales}>
{(locale) => (
<DropdownItem
selected={locale === language.locale()}
onClick={() => {
language.setLocale(locale)
const href = `${route(locale, strip(location.pathname))}${location.search}${location.hash}`
if (href !== `${location.pathname}${location.search}${location.hash}`) navigate(href)
setOpen(false)
}}
>
{language.label(locale)}
</DropdownItem>
)}
</For>
</Dropdown>
</div>
)
}
|