initial

apps/client/components/verification/base-card.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    class="verification-card"
+    :class="{
+      'verification-card--passed': passed,
+    }"
+  >
+    <div class="verification-card__header">
+      <UiBadge
+        v-if="badge"
+        :type="badge.type"
+        class="mb-24"
+      >
+        {{ badge.title }}
+      </UiBadge>
+
+      <p class="verification-card-info__title">
+        Withdrawal
+      </p>
+
+      <div
+        v-if="info"
+        class="verification-card-info"
+      >
+        <div>
+          <span class="verification-card-info__per-month-amount">
+            {{ info.perMonth }}
+          </span>
+
+          <span class="verification-card-info__per-month-text"> / month </span>
+        </div>
+
+        <div class="mt-4">
+          <span class="verification-card-info__per-day-amount">
+            {{ info.perDay }}
+          </span>
+
+          <span class="verification-card-info__per-day-text"> / day </span>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="verification-card-info"
+      >
+        <span class="verification-card-info__per-month-amount">
+          No limit
+        </span>
+
+        <span class="verification-card-info__per-month-text"> / month & day </span>
+      </div>
+    </div>
+
+    <div class="verification-card-body">
+      <slot />
+    </div>
+
+    <div class="verification-card__action">
+      <UiAlert
+        v-if="passed"
+        type="positive"
+        text="Your current status"
+      />
+
+      <UiButton
+        v-else
+        class="w-100"
+        size="large"
+        :href="link"
+      >
+        Start verification
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  passed: {
+    type: Boolean,
+    default: false,
+  },
+  badge: {
+    type: Object,
+    required: true,
+  },
+  info: {
+    type: Object,
+    default: null,
+  },
+  link: {
+    type: String,
+    default: '#',
+  },
+})
+</script>
+
+<style lang="scss">
+.verification-card {
+  $self: &;
+  display: flex;
+  flex-direction: column;
+
+  width: var(--verification-card-width, 405px);
+  //height: 585px;
+  padding: 24px;
+  border-radius: 12px;
+  background-color: $clr-grey-200;
+
+  &__header {
+    height: 157px;
+    border-bottom: 1px solid $clr-grey-400;
+    margin-bottom: 16px;
+  }
+
+  &__action {
+    margin-top: auto;
+  }
+
+  &--passed {
+    background-color: $clr-white;
+    outline: $clr-green-500 solid 2px;
+    outline-offset: -2px;
+
+    .verification-card__title {
+      color: $clr-black;
+    }
+  }
+}
+
+.verification-card-info {
+  &__per-month-amount {
+    @include h2;
+  }
+
+  &__per-month-text {
+    @include txt-l-sb;
+    color: $clr-grey-400;
+  }
+
+  &__per-day-amount {
+    @include txt-l-sb;
+  }
+
+  &__per-day-text {
+    @include txt-l-sb;
+    color: $clr-grey-400;
+  }
+
+  &__title {
+    @include txt-l-m;
+    color: $clr-grey-500;
+    margin-bottom: 4px;
+  }
+}
+
+.verification-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+</style>