feat(i18n): add locale switcher

2026-04-14 22:32:44 +02:00
parent 7ee9adcc9e
commit 5c59da8ac3
6 changed files with 95 additions and 13 deletions
@@ -0,0 +1,53 @@
+"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>
+  )
+}