add simple locale switcher

buhodev · Nov 19, 2024 · 7db5b3e · 7db5b3e
1 parent e2fe03c
commit 7db5b3e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -1,5 +1,6 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"quiet_chunky_jay_empower": "Welcome to {name}!",
-	"fit_candid_spider_adore": "Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the documentation."
+	"fit_candid_spider_adore": "Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the documentation.",
+	"house_patchy_flamingo_link": "Home"
 }
diff --git a/messages/es.json b/messages/es.json
@@ -1,5 +1,6 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"quiet_chunky_jay_empower": "¡Bienvenido a {name}!",
-	"fit_candid_spider_adore": "Visita <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> para leer la documentación."
+	"fit_candid_spider_adore": "Visita <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> para leer la documentación.",
+	"house_patchy_flamingo_link": "Inicio"
 }
diff --git a/src/app.css b/src/app.css
@@ -6,8 +6,8 @@
 @plugin '@tailwindcss/container-queries';
 
 @theme {
-	--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-	"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--breakpoint-xs: 475px;
 	--breakpoint-3xl: 1920px;
 }

diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages.js';
+	import LocaleSwitcher from '$components/locale-switcher.svelte';
+</script>
+
+<header class="flex items-center justify-between">
+	<a href="/">{m.house_patchy_flamingo_link()}</a>
+
+	<LocaleSwitcher />
+</header>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,12 +4,15 @@
 	import { i18n } from '$lib/i18n';
 	import { ModeWatcher } from 'mode-watcher';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
+	import Header from '$components/header.svelte';
 
 	let { children } = $props();
 </script>
 
 <ModeWatcher />
 
 <ParaglideJS {i18n}>
+	<Header />
+
 	{@render children()}
 </ParaglideJS>