initial

apps/pay/components/invoice-form/amount.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :class="cn.b()">
+    <p :class="cn.e('label')">
+      To pay:
+    </p>
+
+    <div :class="cn.e('left')">
+      <span :class="cn.e('amount')">{{ amount }}</span>
+      <UiCopyButton
+        :class="cn.e('copy')"
+        :title="null"
+        :pressed-title="null"
+        :value="amount"
+      />
+    </div>
+
+    <div :class="cn.e('right')">
+      <UiCoin
+        :class="cn.e('coin')"
+        :code="invoice.currencyCode"
+      />
+      <span :class="cn.e('code')">{{ invoice.currencyCode }}</span>
+      <span :class="cn.e('network')">TRC20</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { invoice } = inject('public-invoice')
+
+const amount = computed(() => $money.format(invoice.value.amount, invoice.value.code))
+
+const cn = useClassname('invoice-form-amount')
+</script>
+
+<style lang="scss">
+.invoice-form-amount {
+  display: grid;
+  grid-template-areas: 'label label' 'left right';
+  text-align: left;
+  padding-inline: 16px;
+
+  &__label {
+    @include txt-r-m;
+
+    grid-area: label;
+    margin-bottom: 3px;
+    color: $clr-grey-500;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    grid-area: left;
+  }
+
+  &__amount {
+    @include h2;
+  }
+
+  &__copy {
+    margin-left: 8px;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    grid-area: right;
+    justify-self: flex-end;
+  }
+
+  &__code {
+    @include font(16px, 600, 20px);
+
+    margin-left: 8px;
+  }
+
+  &__network {
+    @include txt-i-m;
+
+    padding: 3px 5px;
+    border-radius: 6px;
+    background-color: $clr-cyan-500;
+    color: $clr-white;
+    margin-left: 8px;
+  }
+}
+</style>