<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';

</script>

<template>
    <div class="mt-4">
        <div class="flex border-b-2 border-emerald-500">
            <RouterLink :to="{name: 'market-types'}" class="tab">
                <span>Item Info</span>
            </RouterLink>
            <RouterLink to="/market/tracking" class="tab">
                <span>Tracking</span>
            </RouterLink>
            <RouterLink to="/market/acquisitions" class="tab">
                <span>Acquisitions</span>
            </RouterLink>
        </div>
        <RouterView />
    </div>
</template>

<style scoped lang="postcss">
a.tab {
    @apply flex items-center px-4 me-2 rounded-t-md bg-slate-600 hover:bg-slate-700;
    &.router-link-active {
        @apply bg-emerald-500 hover:bg-emerald-700;
    }
}
</style>