gpx.studio/website/src/lib/components/LanguageSelect.svelte

<script lang="ts">
	import { page } from '$app/stores';
	import * as Select from '$lib/components/ui/select';
	import { languages } from '$lib/languages';
	import { getURLForLanguage } from '$lib/utils';
	import { Languages } from 'lucide-svelte';
	import { _, locale } from 'svelte-i18n';

	let selected = {
		value: '',
		label: ''
	};

	$: if ($locale) {
		selected = {
			value: $locale,
			label: languages[$locale]
		};
	}
</script>

<Select.Root bind:selected>
	<Select.Trigger class="w-[180px] {$$props.class ?? ''}" aria-label={$_('menu.language')}>
		<Languages size="16" />
		<Select.Value class="ml-2 mr-auto" />
	</Select.Trigger>
	<Select.Content>
		{#each Object.entries(languages) as [lang, label]}
			{#if $page.url.pathname.includes('404')}
				<a href={getURLForLanguage(lang, '/')}>
					<Select.Item value={lang}>{label}</Select.Item>
				</a>
			{:else}
				<a href={getURLForLanguage(lang, $page.url.pathname)}>
					<Select.Item value={lang}>{label}</Select.Item>
				</a>
			{/if}
		{/each}
	</Select.Content>
</Select.Root>

<!-- hidden links for svelte crawling -->
<div class="hidden">
	{#if !$page.url.pathname.includes('404')}
		{#each Object.entries(languages) as [lang, label]}
			<a href={getURLForLanguage(lang, $page.url.pathname)}>
				{label}
			</a>
		{/each}
	{/if}
</div>