From fa89603cf4c9115c36659e775d0c1ef3c31e70f3 Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Mon, 2 Sep 2024 19:22:31 +0200
Subject: [PATCH] feat: Add language switcher component to footer

The code changes include:
- Adding the `LocaleSwitcher` component to the footer.
- Updating the footer layout to accommodate the language switcher.
- Importing the `LocaleSwitcher` component in the `Footer` component.

This commit enhances the user experience by allowing users to easily change the language of the website.
---
 src/components/footer.tsx          |  3 +++
 src/components/locale-switcher.tsx | 31 ++++++++++++++++++++++++++++++
 src/i18n.ts                        |  3 +--
 src/i18n/routing.ts                | 16 +++++++++++++++
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/components/locale-switcher.tsx
 create mode 100644 src/i18n/routing.ts

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 1bc9202..3f1686a 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -5,6 +5,7 @@ import TextReveal from "./ui/text-reveal";
 import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import { MastodonLogo } from "./icons/mastodon";
 import { Button } from "./ui/button";
+import LocaleSwitcher from "./locale-switcher";
 
 export default function Footer() {
   return (
@@ -26,6 +27,8 @@ export default function Footer() {
                 <MastodonLogo className="w-5 h-5" />
               </a>
             </div>
+            <h2 className="text-md font-bold opacity-80 mt-6">Change Language</h2>
+            <LocaleSwitcher />
           </div>
         </div>
         <div className="flex flex-col md:flex-row">
diff --git a/src/components/locale-switcher.tsx b/src/components/locale-switcher.tsx
new file mode 100644
index 0000000..9c5bf4e
--- /dev/null
+++ b/src/components/locale-switcher.tsx
@@ -0,0 +1,31 @@
+"use client";
+import { usePathname, useRouter } from '@/i18n/routing';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { SUPPORTED_LANGUAGES } from '@/i18n';
+
+export default function LocaleSwitcher() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const onLocaleChange = (value: string) => {
+        router.push(pathname, { locale: value });
+    }
+
+    return (
+        <div className="mt-5 md:w-80">
+            <Select
+                onValueChange={onLocaleChange}
+            >
+                  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select Language" />
+  </SelectTrigger>
+  <SelectContent>
+                {SUPPORTED_LANGUAGES.map((lang) => (
+                    <SelectItem key={lang} value={lang}>
+                        {lang}
+                    </SelectItem>
+                ))}
+                </SelectContent>
+            </Select>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/i18n.ts b/src/i18n.ts
index 0f5d10a..460b8fc 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,7 +1,6 @@
 import { getRequestConfig } from "next-intl/server";
-import { headers } from "next/headers";
 
-export const SUPPORTED_LANGUAGES = ['en', 'de', 'ro']; 
+export const SUPPORTED_LANGUAGES = ['en', 'de']; 
 
 export default getRequestConfig(async ({locale}) => {
   const lang = SUPPORTED_LANGUAGES.includes(locale) ? locale : 'en';
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
new file mode 100644
index 0000000..7c12c69
--- /dev/null
+++ b/src/i18n/routing.ts
@@ -0,0 +1,16 @@
+import {defineRouting} from 'next-intl/routing';
+import {createSharedPathnamesNavigation} from 'next-intl/navigation';
+import { SUPPORTED_LANGUAGES } from '@/i18n';
+ 
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: SUPPORTED_LANGUAGES,
+ 
+  // Used when no locale matches
+  defaultLocale: 'en'
+});
+ 
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const {Link, redirect, usePathname, useRouter} =
+  createSharedPathnamesNavigation(routing);
\ No newline at end of file