initial

apps/client/components/verification/extended.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="elements mb-16">
+      <span class="requirements"> Requirements </span>
+
+      <div>
+        <UiIconSSocialCard class="mr-4 text-clr-grey-400 d-inline-block" />
+        <span class="text"> Organization data </span>
+      </div>
+
+      <div>
+        <UiIconSExcursion class="mr-4 text-clr-grey-400" />
+        <span class="text">Identity verification </span>
+      </div>
+    </div>
+
+    <div
+      v-for="block in propertyBlocks"
+      :key="block.title"
+      class="elements"
+    >
+      <span class="title">
+        {{ block.title }}
+      </span>
+
+      <h5 class="text-clr-grey-500">
+        {{ block.underTitle }}
+      </h5>
+
+      <VerificationProperty
+        v-for="property in block.properties"
+        :key="property.title"
+        :title="property.title"
+        :text="property.text"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const propertyBlocks = [
+  {
+    title: 'Restrictions',
+    underTitle: 'Invoices',
+    properties: [
+      { title: 'Invoice creation', text: 'unlimited' },
+      { title: 'Commission for creating an invoice is', text: '0.5 USDT' },
+    ],
+  },
+  {
+    underTitle: 'Withdrawal of funds',
+    properties: [
+      { title: 'Commission for withdrawal is', text: '2.5 USDT + 1%' },
+    ],
+  },
+]
+</script>
+
+<style lang="scss" scoped>
+.elements {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.title{
+  @include txt-m-b;
+}
+
+.text{
+  @include txt-r-m;
+  color: $clr-grey-500;
+}
+
+.requirements{
+  @include txt-m-b;
+}
+</style>