aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/InvoiceTypes.svelte
blob: 00b5cfb3c35ad392ddfb1c896aea724400bcd001 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script>
  import { types } from "$lib/utils";
  import { goto } from "$app/navigation";
  let { aid, invoice, user, type, t, setType } = $props();
</script>

{#if invoice.uid === aid}
  <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.lightning}
      class:text-secondary={type === types.lightning}
      onclick={() => setType(types.lightning)}
    >
      <div
        class="bg-black rounded-full w-8 h-8 items-center justify-center flex"
      >
        <div class="m-auto">
          <iconify-icon
            icon="ph:lightning-fill"
            class="text-yellow-300 text-2xl"
          ></iconify-icon>
        </div>
      </div>
      <div class="my-auto text-lg">Lightning</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.ecash}
      class:text-secondary={type === types.ecash}
      onclick={() => setType(types.ecash)}
    >
      <img src="/images/cash.png" class="w-8 my-auto" />
      <div class="my-auto text-lg">Ecash</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.bitcoin}
      class:text-secondary={type === types.bitcoin}
      onclick={() => setType(types.bitcoin)}
    >
      <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
      <div class="my-auto text-lg">Bitcoin</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.liquid}
      class:text-secondary={type === types.liquid}
      onclick={() => setType(types.liquid)}
    >
      <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
      <div class="my-auto text-lg">Liquid</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.liquid}
      class:text-secondary={type === types.liquid}
      onclick={() => goto("/scan")}
    >
      <iconify-icon icon="ph:camera-bold" width="32"></iconify-icon>
      <div class="my-auto text-lg">{t("user.send.scan")}</div>
    </button>

    <button
      class="btn flex-nowrap"
      class:bg-base-300={type === types.bitcoin}
      class:text-secondary={type === types.bitcoin}
      onclick={() => goto("/receive")}
    >
      <iconify-icon icon="ph:clipboard-text-bold" width="32"></iconify-icon>
      <div class="my-auto text-lg">{t("user.send.paste")}</div>
    </button>
  </div>

  <button
    class="btn flex-nowrap"
    class:bg-base-300={type === types.bolt12}
    class:text-secondary={type === types.bolt12}
    onclick={() => setType(types.bolt12)}
  >
    <div class="bg-black rounded-full w-8 h-8 items-center justify-center flex">
      <div class="m-auto">
        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300 text-2xl"
        ></iconify-icon>
      </div>
    </div>
    <div class="my-auto text-lg">Bolt 12</div>
  </button>
{/if}