Tabs

<script lang="ts" setup>
const options = ref([
  {
    title: 'Example 1',
  },
  {
    title: 'Example 2',
  },
  {
    title: 'Example 3',
  },
])
const activeTab = ref(0)
const tabChange = (index: number) => {
  activeTab.value = index
}
</script>

<template>
  <CTabs>
    <CTab
      v-for="(tab, index) in options"
      :key="tab.title"
      :tab-index="index"
      :active-index="activeTab"
      @tab-change="tabChange(index)"
    >
      <template #icon>
        <CIcon
          v-if="tab.title === 'Example 1'"
          name="i-heroicons-solid-home"
        />
        <CIcon
          v-else-if="tab.title === 'Example 2'"
          name="i-heroicons-solid-cog"
        />
        <CIcon
          v-else-if="tab.title === 'Example 3'"
          name="i-heroicons-information-circle"
        />
      </template>
      <span>{{ tab.title }}</span>
    </CTab>
  </CTabs>
</template>