From 3fb6286ff9dfc8accc6f274aad77782289472181 Mon Sep 17 00:00:00 2001
From: marshmallow <marshycity@gmail.com>
Date: Tue, 7 May 2024 21:31:32 +1000
Subject: [PATCH] feat: lang switcher

---
 src/components/Header.astro | 22 ++++++++++++++++++++++
 src/i18n/utils.ts           |  6 ++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b300f1d..12e91d6 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,6 +3,7 @@ interface Props {}
 
 import { useTranslations } from "../i18n/utils";
 import type { Params } from "../i18n/utils";
+import { languages } from "../i18n/ui";
 import { Image } from "astro:assets";
 import aux from "../../public/aux.svg";
 
@@ -33,6 +34,27 @@ const translation = useTranslations(lang);
 				>
 			</li>
 			<li><a href="https://github.com/auxolotl">GitHub</a></li>
+
+			<select data-lang-selector class="bg-transparent">
+				{
+					Object.keys(languages).map((lang) => (
+						<option value={lang} class="text-black">
+							{languages[lang as keyof typeof languages]}
+						</option>
+					))
+				}
+			</select>
 		</ul>
 	</nav>
 </header>
+
+<script>
+	import { switchLang } from "../i18n/utils";
+	import type { languages } from "../i18n/ui";
+	const select: HTMLSelectElement | null = document.querySelector(
+		"[data-lang-selector]",
+	);
+	select?.addEventListener("change", () => {
+		switchLang(select.value as keyof typeof languages);
+	});
+</script>
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
index d10e23e..1f4fc3e 100644
--- a/src/i18n/utils.ts
+++ b/src/i18n/utils.ts
@@ -11,6 +11,12 @@ export function useTranslations(lang: keyof typeof ui) {
 	};
 }
 
+export function switchLang(lang: keyof typeof ui) {
+	const parts = location.pathname.split("/");
+	parts[1] = lang;
+	location.href = parts.join("/");
+}
+
 export const getStaticPaths = (async () => {
 	return Object.keys(languages).map((name) => ({
 		params: { lang: name as keyof typeof languages },