Tabs ​

<template>
  <ATabs
    class="a-tabs-bordered"
    :tabs="['Account', 'Notifications', 'Settings']"
  />
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const defaultTabs = [
  { title: 'Account', icon: 'i-bx-user' },
  { title: 'Notifications', icon: 'i-bx-bell' },
  { title: 'Settings', icon: 'i-bx-cog' },
]

const iconTypes = ['default', 'stacked', 'icon-only'] as const
const iconsType = ref<typeof iconTypes[number]>('default')

const tabs = computed(() => {
  if (iconsType.value === 'default' || iconsType.value === 'stacked')
    return defaultTabs

  return defaultTabs.map(tab => ({ ...tab, title: '' }))
})
</script>

<template>
  <!-- ℹ️ `min-h-118px` class is to avoid height jerk  -->
  <div class="min-h-118px">
    <div class="flex gap-4 mb-4">
      <ARadio
        v-for="iconType in iconTypes"
        :key="iconType"
        v-model="iconsType"
        :value="iconType"
        :name="iconType"
        :label="iconType"
      />
    </div>
    <ATabs
      :key="iconsType"
      class="a-tabs-bordered"
      :tabs="tabs"
      :stacked-tabs="iconsType === 'stacked'"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tabs = ref([
  { title: 'Account', icon: 'i-bx-user' },
  { title: 'Notifications', icon: 'i-bx-bell' },
  { title: 'Settings', icon: 'i-bx-cog' },
])

const activeTab = ref(2)
</script>

<template>
  <ATabs
    v-model="activeTab"
    class="a-tabs-bordered"
    :tabs="tabs"
  />
</template>

<script lang="ts" setup>
const tabs = [
  { title: 'Account', icon: 'i-bx-user' },
  { title: 'Notifications', icon: 'i-bx-bell' },
  { title: 'Settings', icon: 'i-bx-cog' },
]
</script>

<template>
  <ATabs
    class="a-tabs-bordered"
    :tabs="tabs"
    vertical
  />
</template>

<script lang="ts" setup>
const tabs = [
  { title: 'Account', icon: 'i-bx-user' },
  { title: 'Notifications', icon: 'i-bx-bell' },
  { title: 'Security', icon: 'i-bx-lock' },
  { title: 'Connections', icon: 'i-bx-link' },
  { title: 'Billing', icon: 'i-bx-credit-card' },
  { title: 'Settings', icon: 'i-bx-cog' },
]
</script>

<template>
  <ATabs
    class="a-tabs-bordered"
    :tabs="tabs"
  />
</template>

<script lang="ts" setup>
const tabs = [
  {
    title: 'Account',
    value: 'account',
    icon: 'i-bx-user',
  },
  {
    title: 'Notifications',
    value: 'notifications',
    icon: 'i-bx-bell',
  },
  {
    title: 'Settings',
    value: 'settings',
    icon: 'i-bx-cog',
  },
]
</script>

<template>
  <div class="cards-demo-container">
    <ACard>
      <ATabs
        class="a-tabs-bordered"
        :tabs="tabs"
      >
        <!-- 👉 Account -->
        <template #account>
          <div class="a-card-body">
            Bear claw sweet dessert sweet chocolate bar sesame snaps shortbread.
          </div>
        </template>

        <!-- 👉 Notifications -->
        <template #notifications>
          <div class="a-card-body">
            Lollipop marzipan cotton candy pie macaroon wafer jelly beans shortbread.
          </div>
        </template>

        <!-- 👉 Settings -->
        <template #settings>
          <div class="a-card-body">
            Pastry biscuit tart I love gummies wafer oat cake.
          </div>
        </template>
      </ATabs>
    </ACard>
  </div>
</template>