Add locale switch component

app/app/src/components/LocalesPicker/LocalesPicker.astro

@@ -0,0 +1,55 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n'
+
+export interface Props
+{
+	lang?: string | undefined
+}
+
+const {
+	lang = Astro.currentLocale,
+} = Astro.props
+---
+
+<ul class="lang-list">
+	<li>
+		<a
+			href={getRelativeLocaleUrl('fr', Astro.url.pathname)}
+			class:list={[ lang === 'fr' && 'active' ]}
+		>
+			<span class="icon icon-[twemoji--flag-france] icon-align"></span>
+		</a>
+	</li>
+	<li>
+		<a
+			href={getRelativeLocaleUrl('en', Astro.url.pathname)}
+			class:list={[ lang === 'en' && 'active' ]}
+		>
+			<span class="icon icon-[twemoji--flag-united-kingdom] icon-align"></span>
+		</a>
+	</li>
+</ul>
+
+<style lang="scss">
+@reference "tailwindcss/theme";
+
+.lang-list {
+	@apply flex items-center mb-4 gap-2;
+
+	.icon {
+		@apply text-2xl;
+	}
+
+	a {
+		@apply opacity-50;
+
+		&:hover {
+			@apply opacity-75;
+		}
+
+		&:active, &.active {
+			@apply opacity-100;
+		}
+	}
+}
+</style>

app/app/src/components/LocalesPicker/LocalesPicker.spec.ts

@@ -0,0 +1,26 @@
+import { experimental_AstroContainer as AstroContainer } from 'astro/container'
+import { expect, test } from 'vitest'
+import LocalesPicker from './LocalesPicker.astro'
+
+test('LocalesPicker with defaults', async () =>
+{
+	const container = await AstroContainer.create()
+	const result = await container.renderToString(LocalesPicker)
+
+	expect(result).toBeTruthy()
+	expect(result).not.toContain('active')
+})
+
+test('LocalesPicker with FR language', async () =>
+{
+	const container = await AstroContainer.create()
+	const result = await container.renderToString(LocalesPicker, {
+		props: {
+			lang: 'fr',
+		}
+	})
+
+	expect(result).toBeTruthy()
+	expect(result).toContain('active')
+	expect(result).toMatch(/<a href="\/fr"[^>]+class="active"[^>]*>/)
+})

app/app/src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content'
+import LocalesPicker from '~/components/LocalesPicker/LocalesPicker.astro'
 import Layout from '~/layouts/Layout.astro'
 
 import logosrc from '~/assets/logo.png?url'
@@ -37,6 +38,8 @@ function getTitleFromBody(body: string | undefined): string | undefined
 
 	<div class="main">
 
+		<LocalesPicker lang={Astro.currentLocale} />
+
 		<p>
 			<span class="icon icon-[mdi--hand-wave] icon-align icon-fw"></span>
 			{_({