neptune-web-wallet/src/views/Home/components/UTXOTab.vue

<script setup lang="ts">
import { ref } from 'vue'
import { EditOutlined } from '@ant-design/icons-vue'
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'
import { CardBaseScrollable } from '@/components'

const { getUtxos } = useNeptuneWallet()

const inUseUtxosCount = ref(0)
const inUseUtxosAmount = ref(0)
</script>

<template>
    <CardBaseScrollable class="content-card debug-card">
        <div class="debug-header">
            <h3 class="debug-title">
                IN USE UTXOS
                <EditOutlined style="margin-left: 8px; font-size: 16px" />
            </h3>
            <div class="debug-info">
                <p><strong>COUNT</strong> {{ inUseUtxosCount }}</p>
                <p><strong>AMOUNT</strong> {{ inUseUtxosAmount }} NPT</p>
            </div>
        </div>

        <div class="list-pagination"></div>
    </CardBaseScrollable>
</template>

<style lang="scss" scoped>
.debug-card {
    .debug-header {
        text-align: center;
        margin-bottom: var(--spacing-2xl);
        padding-bottom: var(--spacing-xl);
        border-bottom: 2px solid var(--border-color);

        .debug-title {
            font-size: var(--font-2xl);
            font-weight: var(--font-bold);
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
            letter-spacing: var(--tracking-wide);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .debug-info {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);

            p {
                margin: 0;
                font-size: var(--font-lg);
                color: var(--text-secondary);

                strong {
                    font-weight: var(--font-semibold);
                    margin-right: var(--spacing-sm);
                }
            }
        }
    }
}
</style>