From 97d6f22dcb44825cee908f7f4d574326485b3560 Mon Sep 17 00:00:00 2001
From: Al Murad Uzzaman <murad.themefisher@gmail.com>
Date: Thu, 16 May 2024 12:09:13 +0600
Subject: [PATCH] languageSwithcher component added

---
 src/layouts/helpers/LanguageSwitcher.tsx | 31 ++++++++++++
 src/layouts/partials/Header.astro        | 61 ++++++------------------
 src/pages/[...lang]/blog/index.astro     |  7 +--
 3 files changed, 49 insertions(+), 50 deletions(-)
 create mode 100644 src/layouts/helpers/LanguageSwitcher.tsx

diff --git a/src/layouts/helpers/LanguageSwitcher.tsx b/src/layouts/helpers/LanguageSwitcher.tsx
new file mode 100644
index 0000000..9f98509
--- /dev/null
+++ b/src/layouts/helpers/LanguageSwitcher.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+const LanguageSwitcher = ({ lang, languages, pathname }: { lang: string; languages: string[]; pathname: string }) => {
+	return (
+		<div className="mr-5">
+			<select
+				className="border border-dark py-1 rounded-sm"
+				onChange={(e) => {
+					const selectedLang = e.target.value;
+					const newPath = selectedLang === "en"
+						? pathname.replace(`/${lang}`, "")
+						: `/${selectedLang}${pathname.replace(`/${lang}`, "")}`;
+					window.location.href = newPath;
+				}}
+				value={languages.includes(lang) ? lang : 'en'}
+			>
+				{languages.map((child: string) => (
+					<option
+						key={child}
+						value={child}
+					>
+						{child}
+					</option>
+				))}
+			</select>
+		</div>
+
+	)
+}
+
+export default LanguageSwitcher
\ No newline at end of file
diff --git a/src/layouts/partials/Header.astro b/src/layouts/partials/Header.astro
index d76fe96..538370a 100755
--- a/src/layouts/partials/Header.astro
+++ b/src/layouts/partials/Header.astro
@@ -2,7 +2,12 @@
 import Logo from "@/components/Logo.astro";
 import ThemeSwitcher from "@/components/ThemeSwitcher.astro";
 import config from "@/config/config.json";
-import { getLangFromUrl, languages, useTranslations } from "@/lib/utils/i18nUtils";
+import LanguageSwitcher from "@/helpers/LanguageSwitcher";
+import {
+  getLangFromUrl,
+  languages,
+  useTranslations,
+} from "@/lib/utils/i18nUtils";
 import { loadMenu } from "@/lib/utils/loadMenu";
 import { getRelativeLocaleUrl } from "astro:i18n";
 import { IoSearch } from "react-icons/io5";
@@ -108,7 +113,7 @@ const t = useTranslations(lang as any);
               class="btn btn-outline-primary btn-sm"
               href={navigation_button.link}
             >
-              {t('get_started')}
+              {t("get_started")}
             </a>
           </li>
         )
@@ -116,50 +121,6 @@ const t = useTranslations(lang as any);
     </ul>
 
     <div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
-      <!-- Language dropdown -->
-      <div class="nav-item nav-dropdown group relative border mr-5">
-        <span
-          class={`nav-link inline-flex items-center ${
-            languages
-              .map((child) => getRelativeLocaleUrl(child, "/"))
-              .includes(pathname)
-              ? "active"
-              : ""
-          }`}
-        >
-          {lang}
-          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
-            <path
-              d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
-            ></path>
-          </svg>
-        </span>
-        <ul
-          class="nav-dropdown-list hidden group-hover:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100"
-        >
-          {
-            languages.map((child: string) => (
-              <li class="nav-dropdown-item">
-                <a
-                  href={
-                    child === "en"
-                      ? pathname.replace(`/${lang}`, "")
-                      : `/${child}${pathname.replace(`/${lang}`, "")}`
-                  }
-                  aria-label={child}
-                  class={`nav-dropdown-link block ${
-                    pathname.startsWith(`/${child}`) && "active"
-                  }`}
-                >
-                  {child}
-                </a>
-              </li>
-            ))
-          }
-        </ul>
-      </div>
-      <!-- End Language dropdown -->
-
       {
         settings.search && (
           <button
@@ -172,13 +133,19 @@ const t = useTranslations(lang as any);
         )
       }
       <ThemeSwitcher className="mr-5" />
+      <LanguageSwitcher
+        client:load
+        lang={lang}
+        languages={languages}
+        pathname={pathname}
+      />
       {
         navigation_button.enable && (
           <a
             class="btn btn-outline-primary btn-sm hidden lg:inline-block"
             href={navigation_button.link}
           >
-             {t('get_started')}
+            {t("get_started")}
           </a>
         )
       }
diff --git a/src/pages/[...lang]/blog/index.astro b/src/pages/[...lang]/blog/index.astro
index 170b81e..46801d7 100755
--- a/src/pages/[...lang]/blog/index.astro
+++ b/src/pages/[...lang]/blog/index.astro
@@ -19,9 +19,10 @@ export function getStaticPaths() {
 }
 const { lang } = Astro.params;
 const BLOG_FOLDER = "blog";
-// const postIndex = await getListPage(BLOG_FOLDER, lang as keyof ContentEntryMap);
-const postIndex: any
- = await getListPage(BLOG_FOLDER, lang as keyof ContentEntryMap);
+const postIndex: any = await getListPage(
+  BLOG_FOLDER,
+  lang as keyof ContentEntryMap
+);
 const langCollection: keyof ContentEntryMap = lang as keyof ContentEntryMap;
 const posts = await getSinglePage(BLOG_FOLDER, lang as keyof ContentEntryMap);