1 files changed, 52 insertions, 0 deletions
diff --git a/apps/kit/src/lib/components/locale-switcher.svelte b/apps/kit/src/lib/components/locale-switcher.svelte
new file mode 100644
index 0000000..39d6168
--- /dev/null
+++ b/apps/kit/src/lib/components/locale-switcher.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+    import {browser} from "$app/environment";
+    import {page} from "$app/stores";
+    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";
+
+    const switchLocale = async (
+        newLocale: Locales,
+        updateHistoryState = true,
+    ) => {
+        if (!newLocale || $locale === newLocale) return;
+
+        // load new dictionary from server
+        await loadLocaleAsync(newLocale);
+
+        // select locale
+        setLocale(newLocale);
+
+        // update `lang` attribute
+        document.querySelector("html")?.setAttribute("lang", newLocale);
+
+        //TODO set cookie that persists the locale
+    };
+
+    // update locale when navigating via browser back/forward buttons
+    const handlePopStateEvent = async ({state}: PopStateEvent) =>
+        switchLocale(state.locale, false);
+
+    // update locale when page store changes
+    $: if (browser) {
+        const lang = $page.params.lang as Locales;
+        switchLocale(lang, false);
+    }
+</script>
+
+<svelte:window on:popstate={handlePopStateEvent}/>
+
+<ul>
+    {#each locales as l}
+        <li>
+            <button
+                    type="button"
+                    class:active={l === $locale}
+                    on:click={() => switchLocale(l)}
+            >
+                {l}
+            </button>
+        </li>
+    {/each}
+</ul>