testing-proxy/src/routes/+page.svelte

<script>
  import {
    Alert,
    Button,
    ButtonGroup,
  } from 'flowbite-svelte';

  import {
    getLocale,
    setLocale,
  } from '$lib/paraglide/runtime';

  import { m } from '$lib/paraglide/messages.js';

  import {
    CheckCircleSolid,
    GlobeSolid,
    InfoCircleSolid,
  } from "flowbite-svelte-icons";
</script>

<div class="p-8">
  <Alert color="green" class="mb-4">
    {#snippet icon()}<InfoCircleSolid class="h-5 w-5" />{/snippet}
    <span class="font-medium">{m.welcome()}</span>
    {m.welcome_documentation()}: <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a>
  </Alert>

  <ButtonGroup>
    {#each [ { tag: 'en-us', label: 'English' }, { tag: 'es-mx', label: 'Español' } ] as language}
      <Button color={getLocale() === language.tag ? 'green' : 'dark'} disabled={getLocale() === language.tag} onclick={() => setLocale(language.tag)}>
        {#if getLocale() === language.tag}<CheckCircleSolid class="mr-2" />{:else}<GlobeSolid class="mr-2" />{/if}
        {language.label}
      </Button>
    {/each}
  </ButtonGroup>
</div>