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

@@ -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">

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>
+    )
+}

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';

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);