initial

layers/shared/components/money-amount.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="money-amount">
+    <p class="money-amount__value">
+      {{ value }}
+      <span
+        v-if="showCurrency"
+        class="money-amount__currency"
+      >{{
+        currencySymbol
+      }}</span>
+    </p>
+    <p
+      v-if="showBaseAmount"
+      class="money-amount__base"
+    >
+      <span v-if="false">~</span> 0,00
+      <span class="money-amount__currency">$</span>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Decimal from 'decimal.js'
+
+export interface Props {
+  value: Decimal.Value
+  currency: string
+  showCurrency?: boolean
+  rate?: Decimal.Value
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showCurrency: true,
+})
+
+const value = computed(() => $money.format(props.value, props.currency))
+const currencySymbol = computed(() => $money.getSymbol(props.currency))
+const showBaseAmount = computed(() => !!props.rate)
+</script>
+
+<style lang="scss">
+.money-amount {
+  display: inline-block;
+  vertical-align: middle;
+
+  &__value {
+    @include txt-r-sb('money-amount-value');
+
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  &__currency {
+    color: $clr-grey-400;
+  }
+
+  &__base {
+    @include txt-s-m;
+
+    display: inline-block;
+    color: $clr-grey-500;
+    margin-top: 4px;
+  }
+}
+</style>