72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
isLoadingData: boolean
|
|
availableBalance: string
|
|
pendingBalance: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="balance-section">
|
|
<div class="balance-label">Available</div>
|
|
<div class="balance-amount">
|
|
<span v-if="props.isLoadingData"><SpinnerCommon size="medium" /></span>
|
|
<span v-else>{{ props.availableBalance }} NPT</span>
|
|
</div>
|
|
<div class="pending-section">
|
|
<span class="pending-label">Pending</span>
|
|
<span class="pending-amount">
|
|
{{ props.isLoadingData ? '...' : props.pendingBalance }}
|
|
NPT
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.balance-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-xl);
|
|
padding-bottom: var(--spacing-lg);
|
|
border-bottom: 2px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
|
|
.balance-label {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-base);
|
|
margin-bottom: var(--spacing-sm);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-wider);
|
|
}
|
|
|
|
.balance-amount {
|
|
font-size: var(--font-4xl);
|
|
font-weight: var(--font-bold);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-lg);
|
|
letter-spacing: var(--tracking-tight);
|
|
}
|
|
|
|
.pending-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-md);
|
|
|
|
.pending-label {
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.pending-amount {
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
}
|
|
}
|
|
</style>
|