46 lines
945 B
Vue
46 lines
945 B
Vue
<template>
|
|
<div class="block">
|
|
<span class="text-small">Spent</span>
|
|
<span class="text-small">Remaining limit </span>
|
|
</div>
|
|
|
|
<UiProgressBar class="progress" :progress="(amount / maxAmount) * 100" />
|
|
|
|
<div class="block">
|
|
<span class="text-amount">{{ amount }} <span class="text-currency">{{ currency }}</span></span>
|
|
<span class="text-amount">{{ maxAmount - amount }} <span class="text-currency">{{ currency }}</span> </span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
currency: { type: String, required: true },
|
|
amount: { type: Number, required: true },
|
|
maxAmount: { type: Number, required: true },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.block{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.progress{
|
|
margin-block: 8px;
|
|
}
|
|
|
|
.text-small {
|
|
@include txt-r;
|
|
color: $clr-grey-500;
|
|
}
|
|
|
|
.text-currency {
|
|
@include txt-i-sb;
|
|
color: $clr-grey-400;
|
|
}
|
|
.text-amount{
|
|
@include txt-i-sb;
|
|
}
|
|
</style>
|