diff --git a/components/custom/locale-switch.tsx b/components/custom/locale-switch.tsx new file mode 100644 index 0000000..656c971 --- /dev/null +++ b/components/custom/locale-switch.tsx @@ -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 = { + de: t('german'), + en: t('english'), + } + + function switchLocale(newLocale: string) { + router.replace(pathname, { locale: newLocale }) + } + + return ( + + + + + + {routing.locales.map((locale) => ( + switchLocale(locale)} + className={currentLocale === locale ? "font-medium" : ""} + > + {localeLabels[locale]} + + ))} + + + ) +} \ No newline at end of file diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx index 7a26f5a..4ca4754 100644 --- a/components/custom/navbar.tsx +++ b/components/custom/navbar.tsx @@ -5,6 +5,7 @@ import Link from "next/link" import { cn } from "@/lib/utils" import { ThemeSwitch } from "./theme-switch" import { useTranslations } from "next-intl" +import { LocaleSwitch } from "./locale-switch" export default function Navbar() { const [scrolled, setScrolled] = useState(false); @@ -55,7 +56,10 @@ export default function Navbar() { - +
+ + +
) diff --git a/components/custom/theme-switch.tsx b/components/custom/theme-switch.tsx index 7d05d8a..a9ec7b7 100644 --- a/components/custom/theme-switch.tsx +++ b/components/custom/theme-switch.tsx @@ -1,6 +1,5 @@ "use client" -import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" @@ -11,9 +10,17 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" +import { useTranslations } from "next-intl" export function ThemeSwitch() { - const { setTheme } = useTheme() + const { setTheme } = useTheme(); + + const t = useTranslations('themes'); + const themeLabels: Record = { + light: t('light'), + dark: t('dark'), + system: t('system'), + } return ( @@ -26,13 +33,13 @@ export function ThemeSwitch() { setTheme("light")}> - Light + {themeLabels['light']} setTheme("dark")}> - Dark + {themeLabels['dark']} setTheme("system")}> - System + {themeLabels['system']} diff --git a/i18n/routing.ts b/i18n/routing.ts index ba82d49..e9daf9e 100644 --- a/i18n/routing.ts +++ b/i18n/routing.ts @@ -2,6 +2,6 @@ import { defineRouting } from "next-intl/routing"; export const routing = defineRouting({ locales: ["de", "en"], - defaultLocale: "de", + defaultLocale: "en", localePrefix: "as-needed", }); \ No newline at end of file diff --git a/messages/de.json b/messages/de.json index 41fd9c1..88cfa4a 100644 --- a/messages/de.json +++ b/messages/de.json @@ -3,5 +3,14 @@ "home": "Startseite", "aboutMe": "Über Mich", "projects": "Projekte" + }, + "languages": { + "english": "Englisch", + "german": "Deutsch" + }, + "themes": { + "light": "Hell", + "dark": "Dunkel", + "system": "System" } } diff --git a/messages/en.json b/messages/en.json index 0099181..864ed66 100644 --- a/messages/en.json +++ b/messages/en.json @@ -1,7 +1,16 @@ { - "pages": { - "home": "Home", - "aboutMe": "About Me", - "projects": "Projects" - } -} \ No newline at end of file + "pages": { + "home": "Home", + "aboutMe": "About Me", + "projects": "Projects" + }, + "languages": { + "german": "German", + "english": "English" + }, + "themes": { + "light": "Light", + "dark": "Dark", + "system": "System" + } +}