From 7db5b3e274fa59696f8eefcdc613e5e5b5a5ac36 Mon Sep 17 00:00:00 2001
From: Carlos Ivanchuk <buhodev@proton.me>
Date: Mon, 18 Nov 2024 23:19:37 -0400
Subject: [PATCH] add simple locale switcher

---
 messages/en.json                 |  3 ++-
 messages/es.json                 |  3 ++-
 src/app.css                      |  4 ++--
 src/lib/components/header.svelte | 10 ++++++++++
 src/routes/+layout.svelte        |  3 +++
 5 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/header.svelte

diff --git a/messages/en.json b/messages/en.json
index b0ba948..86a6153 100644
--- 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
index a1effef..e21529d 100644
--- 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
index 5235268..d454cbc 100644
--- 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
new file mode 100644
index 0000000..a82b2e7
--- /dev/null
+++ 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
index 7543eea..0e10e48 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
 	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>
@@ -11,5 +12,7 @@
 <ModeWatcher />
 
 <ParaglideJS {i18n}>
+	<Header />
+
 	{@render children()}
 </ParaglideJS>