[dyad] Added language switcher - wrote 10 file(s), renamed 2 file(s), added next-intl package(s)

2026-01-18 12:47:25 +01:00
parent 256c071bec
commit a64ce49523
10 changed files with 738 additions and 98 deletions
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "../globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
+import { NextIntlClientProvider, useMessages } from "next-intl";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -21,23 +22,29 @@ export const metadata: Metadata = {

 export default function RootLayout({
  children,
+  params: { locale },
 }: Readonly<{
  children: React.ReactNode;
+  params: { locale: string };
 }>) {
+  const messages = useMessages();
+
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          {children}
-          <Toaster />
-        </ThemeProvider>
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+            <Toaster />
+          </ThemeProvider>
+        </NextIntlClientProvider>
      </body>
    </html>
  );
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,15 +1,22 @@
 import { ImageConverter } from "@/components/image-converter";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { useTranslations } from "next-intl";

 export default function Home() {
+  const t = useTranslations("HomePage");
+
  return (
    <div className="relative flex flex-col items-center justify-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
+      <div className="absolute top-4 right-4 z-20">
+        <LanguageSwitcher />
+      </div>
      <main className="flex flex-col items-center w-full max-w-6xl z-10">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
-            Image Web Exporter
+            {t("title")}
          </h1>
          <p className="mt-3 text-lg text-gray-600 dark:text-gray-400">
-            Upload a picture, then export it in a different resolution and format.
+            {t("description")}
          </p>
        </div>
        <ImageConverter />