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