diff --git a/app/dashboard/settings/Settings.tsx b/app/dashboard/settings/Settings.tsx index 094f482..7d97828 100644 --- a/app/dashboard/settings/Settings.tsx +++ b/app/dashboard/settings/Settings.tsx @@ -82,7 +82,7 @@ export default function Settings() { const [pushoverUrl, setPushoverUrl] = useState("") const [pushoverToken, setPushoverToken] = useState("") const [pushoverUser, setPushoverUser] = useState("") - + const [language, setLanguage] = useState("english") const [notifications, setNotifications] = useState([]) const [notificationTextApplication, setNotificationTextApplication] = useState("") @@ -271,6 +271,26 @@ export default function Settings() { } } + useEffect(() => { + const language = Cookies.get("language") + if (language === "en") { + setLanguage("english") + } else if (language === "de") { + setLanguage("german") + } + }, []) + + const setLanguageFunc = (value: string) => { + setLanguage(value) + if (value === "english") { + Cookies.set("language", "en") + } else if (value === "german") { + Cookies.set("language", "de") + } + // Reload the page + window.location.reload() + } + return ( @@ -424,6 +444,34 @@ export default function Settings() { + + +
+ +

{t('Settings.LanguageSettings.Title')}

+
+ + +
+ {t('Settings.LanguageSettings.Description')} +
+ +
+ +
+ + +
diff --git a/app/layout.tsx b/app/layout.tsx index 63afec7..1439f53 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -4,6 +4,7 @@ import "./globals.css"; import { ThemeProvider } from "@/components/theme-provider" import {NextIntlClientProvider} from 'next-intl'; import {getLocale} from 'next-intl/server'; +import {cookies} from 'next/headers'; const geistSans = Geist({ variable: "--font-geist-sans", @@ -20,13 +21,17 @@ export const metadata: Metadata = { description: "The only Dashboard you will need for your Services", }; -export default function RootLayout({ +export default async function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { + const cookieStore = await cookies(); + const locale = cookieStore.get('language')?.value || 'en'; + const messages = (await import(`@/i18n/languages/${locale}.json`)).default; + return ( - + @@ -36,7 +41,7 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > - + {children} diff --git a/i18n/languages/de.json b/i18n/languages/de.json index 5dd532f..65e1185 100644 --- a/i18n/languages/de.json +++ b/i18n/languages/de.json @@ -11,6 +11,7 @@ "noData": "Keine Daten", "Loading": "Lade...", "Refresh": "Aktualisieren", + "Save": "Speichern", "Server": { "CPU": "CPU", "GPU": "GPU", @@ -330,6 +331,12 @@ "Dark": "Dunkel", "System": "System" }, + "LanguageSettings": { + "Title": "Spracheinstellungen", + "Description": "Wählen Sie eine Sprache für die Anwendung.", + "English": "Englisch", + "German": "Deutsch" + }, "Notifications": { "Title": "Benachrichtigungen", "Description": "Erhalten Sie Warnungen bei Statusänderungen", diff --git a/i18n/languages/en.json b/i18n/languages/en.json index 3fba7a6..9d18d63 100644 --- a/i18n/languages/en.json +++ b/i18n/languages/en.json @@ -11,6 +11,7 @@ "noData": "No data", "Loading": "Loading...", "Refresh": "Refresh", + "Save": "Save", "Server": { "CPU": "CPU", "GPU": "GPU", @@ -330,6 +331,12 @@ "Dark": "Dark", "System": "System" }, + "LanguageSettings": { + "Title": "Language Settings", + "Description": "Select a language for the application.", + "English": "English", + "German": "German" + }, "Notifications": { "Title": "Notifications", "Description": "Set up notifications to get instantly alerted when an application changes status.", diff --git a/i18n/request.ts b/i18n/request.ts index a299eb7..0cbc4f9 100644 --- a/i18n/request.ts +++ b/i18n/request.ts @@ -1,9 +1,9 @@ import {getRequestConfig} from 'next-intl/server'; - +import {cookies} from 'next/headers'; + export default getRequestConfig(async () => { - // Provide a static locale, fetch a user setting, - // read from `cookies()`, `headers()`, etc. - const locale = 'en'; + const cookieStore = await cookies(); + const locale = cookieStore.get('language')?.value || 'en'; return { locale,