53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { useLocale, useTranslations } from "next-intl"
|
|
import { useRouter, usePathname } from "@/i18n/navigation"
|
|
import { Languages } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { routing } from "@/i18n/routing"
|
|
|
|
|
|
|
|
export function LocaleSwitch() {
|
|
const currentLocale = useLocale()
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
const t = useTranslations('languages');
|
|
const localeLabels: Record<string, string> = {
|
|
de: t('german'),
|
|
en: t('english'),
|
|
}
|
|
|
|
function switchLocale(newLocale: string) {
|
|
router.replace(pathname, { locale: newLocale })
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Languages className="size-5" />
|
|
<span className="sr-only">Toggle language</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{routing.locales.map((locale) => (
|
|
<DropdownMenuItem
|
|
key={locale}
|
|
onClick={() => switchLocale(locale)}
|
|
className={currentLocale === locale ? "font-medium" : ""}
|
|
>
|
|
{localeLabels[locale]}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
} |