dynamically load translation files

This commit is contained in:
Henry Dollman
2024-10-30 11:40:17 -04:00
parent 3505b215a2
commit 2c4ea6f52a
5 changed files with 48 additions and 42 deletions

View File

@@ -6,6 +6,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
import { useTranslation } from "react-i18next"
import languages from "../lib/languages.json"
import { cn } from "@/lib/utils"
import { setLang } from "@/lib/i18n"
export function LangToggle() {
const { i18n } = useTranslation()
@@ -27,7 +28,7 @@ export function LangToggle() {
<DropdownMenuItem
key={lang}
className={cn("pl-4", lang === i18n.language ? "font-bold" : "")}
onClick={() => i18n.changeLanguage(lang)}
onClick={() => setLang(lang)}
>
{label}
</DropdownMenuItem>

View File

@@ -29,7 +29,7 @@ import {
import { AddSystemButton } from "./add-system"
import { useTranslation } from "react-i18next"
const CommandPalette = lazy(() => import("./command-palette.tsx"))
const CommandPalette = lazy(() => import("./command-palette"))
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
@@ -38,7 +38,7 @@ export default function Navbar() {
return (
<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
<Link href="/" aria-label="Home" className={"p-2 pl-0"}>
<Logo className="h-[1.3em] fill-foreground" />
<Logo className="h-[1.15rem] md:h-[1.3em] fill-foreground" />
</Link>
<SearchButton />

View File

@@ -10,6 +10,7 @@ import { useState, useEffect } from "react"
// import { Input } from '@/components/ui/input'
import { useTranslation } from "react-i18next"
import languages from "../../../lib/languages.json"
import { setLang } from "@/lib/i18n"
export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
const { t, i18n } = useTranslation()
@@ -54,7 +55,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
<Label className="block" htmlFor="lang">
{t("settings.general.language.preferred_language")}
</Label>
<Select value={i18n.language} onValueChange={(lang: string) => i18n.changeLanguage(lang)}>
<Select value={i18n.language} onValueChange={(lang: string) => setLang(lang)}>
<SelectTrigger id="lang">
<SelectValue />
</SelectTrigger>