From d516df8e866668dfa4631d83a0a6769316fe774e Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Mon, 3 Oct 2022 17:33:05 +0800
Subject: refactor: Make component representable

---
 apps/kit/src/lib/components/locale-switcher.svelte | 37 +++++++++++++++-------
 1 file changed, 25 insertions(+), 12 deletions(-)

(limited to 'apps/kit/src/lib/components/locale-switcher.svelte')

diff --git a/apps/kit/src/lib/components/locale-switcher.svelte b/apps/kit/src/lib/components/locale-switcher.svelte
index 477e2d7..2e2d339 100644
--- a/apps/kit/src/lib/components/locale-switcher.svelte
+++ b/apps/kit/src/lib/components/locale-switcher.svelte
@@ -2,37 +2,50 @@
     import { browser } from "$app/environment";
     import { page } from "$app/stores";
     import { CookieNames } from "$lib/configuration";
-    import { set_cookie } from "$lib/helpers";
     import { setLocale, locale } from "$lib/i18n/i18n-svelte";
     import type { Locales } from "$lib/i18n/i18n-types";
     import { locales } from "$lib/i18n/i18n-util";
     import { loadLocaleAsync } from "$lib/i18n/i18n-util.async";
     import Cookies from "js-cookie";
 
-    const switchLocale = async (newLocale: Locales) => {
+    async function switch_locale(newLocale: Locales) {
         if (!newLocale || $locale === newLocale) return;
         await loadLocaleAsync(newLocale);
         setLocale(newLocale);
         document.querySelector("html")?.setAttribute("lang", newLocale);
-        set_cookie(CookieNames.locale, newLocale);
         Cookies.set(CookieNames.locale, newLocale, {
             sameSite: "strict",
             domain: location.hostname,
         });
         console.log("Switched to: " + newLocale);
-    };
+    }
+
+    function on_change(event: Event) {
+        const target = event.target as HTMLSelectElement;
+        switch_locale(target.options[target.selectedIndex].value as Locales);
+    }
 
     $: if (browser) {
-        switchLocale($page.params.lang as Locales);
+        switch_locale($page.params.lang as Locales);
+    }
+
+    function get_locale_name(iso: string) {
+        switch (iso) {
+            case "nb": {
+                return "Norsk Bokmål";
+            }
+            case "en": {
+                return "English";
+            }
+        }
     }
 </script>
 
-<ul>
+<select
+    on:change={on_change}
+    class="mt-1 mr-1 block border-none py-2 pl-3 pr-10 text-base rounded-md right-0 absolute focus:outline-none focus:ring-teal-500 sm:text-sm"
+>
     {#each locales as aLocale}
-        <li>
-            <button type="button" class:active={aLocale === $locale} on:click={() => switchLocale(aLocale)}>
-                {aLocale}
-            </button>
-        </li>
+        <option value={aLocale}>{get_locale_name(aLocale)}</option>
     {/each}
-</ul>
+</select>
-- 
cgit v1.3