shalu-agent-workflow/apps/web/src/components/SetterCommon/Code/TabGroup.vue

<template>
	<div class="border-b border-gray-200">
		<div class="flex gap-4">
			<div
				v-for="tab in tabs"
				:key="tab.value"
				@click="selectTab(tab.value)"
				class="px-4 py-2 text-sm font-medium transition-colors relative"
				:class="[
          modelValue === tab.value
            ? 'text-blue-600'
            : 'text-gray-600 hover:text-gray-900'
        ]"
			>
				{{ tab.label }}
				<div
					v-if="modelValue === tab.value"
					class="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
				></div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
interface Tab {
	label: string
	value: string
}

interface Props {
	modelValue: string
	tabs: Tab[]
}

interface Emits {
	(e: 'update:modelValue', value: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const selectTab = (value: string) => {
	emit('update:modelValue', value)
}
</script>