src/components/Mnemonic.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script lang="ts">
  let { mnemonic } = $props();
  let words = $derived(mnemonic.split(" "));
</script>

<div class="card w-full">
  <div
    class="card-body w-full text-secondary grid grid-flow-col {words.length > 12
      ? 'grid-rows-12'
      : 'grid-rows-6'} sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center justify-items-center whitespace-nowrap text-xl"
  >
    {#each words as w, i}
      <div class="flex items-center gap-2 w-full max-w-[10rem] justify-start">
        <span class="select-none text-sm w-6 text-left">{i + 1}.</span>
        <span class="text-left">
          {@html w === "-" ? "&mdash;" : w}
        </span>
      </div>
    {/each}
  </div>
</div>