initial

apps/client/components/project/info-columns.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="info-columns">
+    <PageInfoBlock
+      title="More limits"
+      text="Get increased limits and advanced features by providing a little more profile information"
+      action="Increase the limit"
+      link="/verification/status"
+      badge="BASIC"
+      style="
+        background-image: url('/block2.jpg');
+        background-size: cover;
+        background-position: bottom right;
+      "
+    >
+      <template #info>
+        <div
+          v-if="!maxState"
+          class="limits"
+        >
+          <p class="limits__date">
+            Updated on <strong>{{ dayjs().format('DD.MM.YYYY') }}</strong>
+          </p>
+
+          <div>
+            <p class="limits__title">
+              Remaining limit
+            </p>
+
+            <div class="mb-4 d-flex justify-content-between">
+              <span class="limits__current">{{ dayLimit }} <span class="limits__current-text">/ per day</span></span>
+
+              <span class="limits__total">{{ curDayLimit }} USDT</span>
+            </div>
+            <UiProgressBar :progress="(curDayLimit / dayLimit) * 100" />
+
+            <div class="mb-4 mt-24 d-flex justify-content-between">
+              <span class="limits__current">{{ monthLimit }} <span class="limits__current-text">/ per month</span></span>
+
+              <span class="limits__total">{{ curMonthLimit }} USDT</span>
+            </div>
+            <UiProgressBar :progress="(curMonthLimit / monthLimit) * 100" />
+          </div>
+        </div>
+      </template>
+    </PageInfoBlock>
+
+    <PageInfoBlock
+      title="2FA authentication"
+      text="Complete the verification process to remove withdrawal limits."
+      action="Add 2FA"
+      link="/2fa"
+    />
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs'
+
+const maxState = ref(false)
+
+const curDayLimit = ref(100)
+const curMonthLimit = ref(5200)
+
+const dayLimit = ref(1000)
+const monthLimit = ref(10000)
+</script>
+
+<style lang="scss">
+.info-columns {
+  > *:not(:last-child) {
+    margin-bottom: 8px;
+  }
+}
+
+.limits {
+  margin-bottom: 24px;
+
+  &__date {
+    @include txt-s;
+    color: $clr-grey-500;
+    margin-bottom: 16px;
+  }
+
+  &__title {
+    @include txt-s-m;
+    color: $clr-grey-400;
+    text-align: right;
+  }
+
+  &__total {
+    @include txt-s-m;
+    color: $clr-grey-500;
+  }
+
+  &__current {
+    @include txt-m-sb;
+  }
+
+  &__current-text{
+    @include txt-r-sb;
+    color: $clr-grey-400;
+  }
+}
+</style>