localization v1

frontend/src/routes/+layout.svelte

@@ -1,11 +1,39 @@
-<script>
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { register, init, locale, waitLocale } from 'svelte-i18n';
+	export let data;
+
+	// Register your translations for each locale
+	register('en', () => import('../locales/en.json'));
+	register('es', () => import('../locales/es.json'));
+
+	if (browser) {
+		init({
+			fallbackLocale: navigator.language.split('-')[0],
+			initialLocale: data.locale
+		});
+		// get the locale cookie if it exists and set it as the initial locale if it exists
+		const localeCookie = document.cookie
+			.split(';')
+			.find((cookie) => cookie.trim().startsWith('locale='));
+		if (localeCookie) {
+			const localeValue = localeCookie.split('=')[1];
+			locale.set(localeValue);
+		}
+	}
+
 	import Navbar from '$lib/components/Navbar.svelte';
 	import Toast from '$lib/components/Toast.svelte';
 	import 'tailwindcss/tailwind.css';
-	export let data;
+
+	// Create a promise that resolves when the locale is ready
+	export const localeLoaded = browser ? waitLocale() : Promise.resolve();
 </script>
 
-<Navbar {data} />
-<Toast />
-
-<slot></slot>
+{#await localeLoaded}
+	<!-- You can add a loading indicator here if needed -->
+{:then}
+	<Navbar {data} />
+	<Toast />
+	<slot />
+{/await}