initial

apps/client/components/currency-name.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="currency-name"
+    :class="`currency-name--${size}`"
+  >
+    <UiCoin
+      class="currency-name__coin"
+      :code="code"
+    />
+
+    <span
+      v-if="size !== 'small'"
+      class="currency-name__name"
+    >
+      {{ name || code }}
+    </span>
+    <span class="currency-name__code">{{ code }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  code: string
+  name?: string
+  size?: 'small' | 'medium'
+}
+
+defineOptions({
+  name: 'CurrencyName',
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+})
+</script>
+
+<style lang="scss">
+.currency-name {
+  &--medium {
+    display: grid;
+    grid-template-columns: 32px auto;
+    gap: var(--currency-name-gap, 4px 8px);
+    align-items: center;
+  }
+
+  &--small {
+    --coin-size: 20px;
+
+    display: inline-flex;
+    vertical-align: middle;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--currency-name-gap, 4px);
+  }
+
+  &__coin {
+    grid-column: 1;
+    grid-row: span 2;
+  }
+
+  &__name {
+    @include txt-r-sb('currency-name');
+
+    color: $clr-black;
+  }
+
+  &__code {
+    @include txt-s-m('currency-name-code');
+
+    color: $clr-grey-500;
+  }
+}
+</style>