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

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

const activeTab = ref('UTXOs')
const network = ref('neptune-mainnet')
</script>

<template>
    <div class="home-container">
        <Row :gutter="[24, 24]">
            <!-- Left Column --->
            <Col :xs="24" :lg="10">
                <WalletInfo />
            </Col>

            <!-- Right Column - Tabs Content -->
            <Col :xs="24" :lg="12">
                <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>
            </Col>
        </Row>
    </div>
</template>

<style lang="scss" scoped>
.home-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    padding: var(--spacing-lg);
    font-family: var(--font-primary);

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

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

:deep(.main-tabs) {
    .ant-tabs-nav {
        margin-bottom: var(--spacing-lg);
    }

    .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 {
        padding-top: var(--spacing-lg);
    }
}
</style>