<script setup lang="ts">
interface Props {
    active?: boolean
}

const props = defineProps<Props>()

const styleClass = computed(() => {
    const activeClass = props.active && 'dui-tab-active font-bold !border-primary text-primary'
    return [activeClass]
})
</script>
<template>
    <a class="dui-tab-bordered dui-tab hover:font-bold hover:text-primary" :class="styleClass">
        <slot></slot>
    </a>
</template>
