164 lines
2.8 KiB
Vue
164 lines
2.8 KiB
Vue
<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>
|