Add project

[rbdr/prompt] / src / lib / components / language_selector.svelte

<script>
	import { locale, locales } from 'svelte-i18n';
	import { getLangNameFromCode } from 'language-name-map';
  import { goto } from '$app/navigation';

	$: namedLocales = $locales
	  .map((code) => ({
	    code,
	    ...getLangNameFromCode(code)
	  }))
	  .sort((a, b) => a.native - b.native);

	let selected = $locale;

	$: {
	  locale.set(selected);
	}

  const navigateAway = function () {
    goto('/');
  };
</script>

<select bind:value={selected} on:change={navigateAway}>
	{#each namedLocales as namedLocale}
		<option value={namedLocale.code}>{namedLocale.native}</option>
	{/each}
</select>

<style>
</style>