44 lines
845 B
Svelte
44 lines
845 B
Svelte
|
<script lang="ts">
|
||
|
|
import { t } from '$lib/i18n/store.svelte';
|
||
|
|
import { getLang, setLang, type Lang } from '$lib/i18n/store.svelte';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="lang-switch" role="group" aria-label="Langue / Lang">
|
||
|
|
{#each ['fr', 'gcf'] as l (l)}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class:actif={getLang() === l}
|
||
|
|
aria-pressed={getLang() === l}
|
||
|
|
onclick={() => setLang(l as Lang)}
|
||
|
|
>
|
||
|
|
{t().langue[l as Lang]}
|
||
|
|
</button>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.lang-switch {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.25rem;
|
||
|
|
background: var(--oki-vert-doux);
|
||
|
|
border-radius: 999px;
|
||
|
|
padding: 0.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--oki-vert);
|
||
|
|
border-radius: 999px;
|
||
|
|
padding: 0.3rem 0.75rem;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.actif {
|
||
|
|
background: var(--oki-vert);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|