From 614fbd99b7963ec89666b8b4252fa5f73c81653c Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Thu, 14 Nov 2024 10:55:08 -0800
Subject: amount component

---
 src/components/Amount.svelte | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/Amount.svelte

(limited to 'src/components/Amount.svelte')

diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
new file mode 100644
index 00000000..de432400
--- /dev/null
+++ b/src/components/Amount.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { s, f, toFiat } from "$lib/utils";
+  import { fiat } from "$lib/store";
+  const { amount, tip, rate, currency } = $props();
+</script>
+
+<div>
+  <h2 class="text-2xl md:text-3xl font-semibold flex justify-center items-end">
+    <div class="flex items-center">
+      <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+      ></iconify-icon>{s(amount)}
+    </div>
+
+    {#if tip}
+      <div class="flex items-center text-lg ml-2">
+        <div>+</div>
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon>
+        <div>{s(tip)}</div>
+      </div>
+    {/if}
+  </h2>
+  <h3 class="text-secondary md:text-lg">
+    {f(toFiat(amount, rate), currency)}
+    {#if tip}
+      <span class="text-base">
+        + {f(toFiat(tip, rate), currency)}
+      </span>
+    {/if}
+  </h3>
+</div>
-- 
cgit v1.2.3