neptune-web-wallet/src/views/Home/HomeView.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Tabs } from 'ant-design-vue'
import { WalletTab, NetworkTab, UTXOTab } from './components'
import { useNeptuneWallet } from '@/composables/useNeptuneWallet'

const neptuneWallet = useNeptuneWallet()

const activeTab = ref('UTXOs')
const network = ref('neptune-mainnet')

onMounted(async () => {
    await neptuneWallet.getNetworkInfo()
})
</script>

<template>
    <div class="home-container">
        <Tabs v-model:activeKey="activeTab" size="large" class="main-tabs">
            <!-- DEBUG TAB -->
            <Tabs.TabPane key="UTXOs" tab="UTXOs">
                <UTXOTab />
            </Tabs.TabPane>

            <!-- WALLET TAB -->
            <Tabs.TabPane key="WALLET" tab="WALLET">
                <WalletTab :network="network" />
            </Tabs.TabPane>

            <!-- NETWORK TAB -->
            <Tabs.TabPane key="NETWORK" tab="NETWORK">
                <NetworkTab />
            </Tabs.TabPane>
        </Tabs>
    </div>
</template>

<style lang="scss" scoped>
.home-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);

    @include screen(tablet) {
        padding: var(--spacing-xl);
    }

    @include screen(desktop) {
        padding: var(--spacing-xl);
    }
}

:deep(.main-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;

    .ant-tabs-nav {
        margin-bottom: var(--spacing-md);
        flex-shrink: 0;
    }

    .ant-tabs-tab {
        font-size: 14px;
        font-weight: var(--font-semibold);
        letter-spacing: var(--tracking-wide);
        padding: 10px 16px;

        @include screen(mobile) {
            font-size: 12px;
            padding: 8px 12px;
        }
    }

    .ant-tabs-ink-bar {
        background: var(--primary-color);
        height: var(--tabs-height);
    }

    .ant-tabs-tab-active .ant-tabs-tab-btn {
        color: var(--primary-color);
    }

    .ant-tabs-content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .ant-tabs-tabpane {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>