41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
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>
|
|
)
|
|
}
|