initial

apps/client/components/asset/card.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="asset-card" :class="{ 'is-active': isActive, 'is-disabled': disabled }">
+    <UiCoin
+      class="asset-card__coin"
+      :code="code"
+    />
+
+    <div class="asset-card__name-wrapper">
+      <p class="asset-card__code">
+        {{ code }}
+      </p>
+
+      <p class="asset-card__name">
+        {{ name }}
+      </p>
+    </div>
+
+    <div class="asset-card__money">
+      <p class="asset-card__balance">
+        <span
+          v-if="showConverted"
+          class="asset-card__converted"
+        >
+          {{ convertedBalance }}
+        </span>
+        <span>{{ balance }}</span>
+      </p>
+
+      <p
+        v-if="withdraw"
+        class="asset-card__withdraw"
+      >
+        <span
+          v-if="showConverted"
+          class="asset-card__converted"
+        >
+          {{ convertedWithdraw }}
+        </span>
+        <span>{{ withdraw }}</span>
+        <UiIconSUpRight class="asset-card__withdraw-icon" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Decimal from 'decimal.js'
+
+interface Props {
+  code: string
+  name?: string
+  balance: Decimal.Value
+  withdraw?: Decimal.Value
+  rate: Decimal.Value
+  isActive?: boolean
+  disabled?: boolean
+}
+
+const props = defineProps<Props>()
+
+const showConverted = computed(() => !!props.rate && props.rate !== 1)
+const convertedBalance = computed(() => $money.fullFormat($money.convert(props.balance, props.rate), 'USDT'))
+const convertedWithdraw = computed(() => $money.fullFormat($money.convert(props.balance, props.rate), 'USDT'))
+</script>
+
+<style lang="scss">
+.asset-card {
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  align-items: center;
+  padding: 24px;
+  border-radius: 12px;
+  background-color: $clr-grey-100;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  cursor: pointer;
+  transition: .2s ease-out;
+  transition-property: outline-color, background-color;
+  min-height: 97px;
+
+  &:hover {
+    outline-color: $clr-grey-300;
+  }
+
+  &.is-active,
+  &:active {
+    background-color: $clr-grey-200;
+  }
+
+  &.is-active {
+    outline-color: $clr-cyan-300;
+  }
+
+  &.is-disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  &__name-wrapper {
+    min-width: 0;
+  }
+
+  &__coin {
+    margin-right: 16px;
+  }
+
+  &__code {
+    @include txt-l-sb;
+
+    text-transform: uppercase;
+  }
+
+  &__name {
+    @include txt-r-m;
+
+    margin-top: 2px;
+    color: $clr-grey-400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__money {
+    text-align: right;
+  }
+
+  &__balance {
+    @include txt-l-sb;
+  }
+
+  &__withdraw {
+    @include txt-i-sb;
+
+    margin-top: 8px;
+  }
+
+  &__balance,
+  &__withdraw {
+    vertical-align: middle;
+    white-space: nowrap;
+
+    span {
+      vertical-align: middle;
+    }
+  }
+
+  &__withdraw-icon {
+    color: $clr-cyan-500;
+    margin-left: 4px;
+  }
+
+  &__converted {
+    @include txt-i-m;
+
+    vertical-align: middle;
+    color: $clr-grey-400;
+
+    &::after {
+      content: '/';
+      margin-inline: 4px;
+      color: $clr-grey-300;
+    }
+  }
+}
+</style>