Use tailwind, reference types

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

<script lang="ts">
	import { locale, locales } from 'svelte-i18n';
	import { getLangNameFromCode } from 'language-name-map';

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

			if (a.native < b.native) {
				return -1;
			}

			return 0;
		});

	let selected = $locale;

	$: {
		locale.set(selected);
	}
</script>

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

<style>
</style>