Tabs ​

<script setup lang="ts">
import { ref } from 'vue';
import { Tab, TabsBar } from '@youcan/ui-vue3';

const activeTab = ref(0);

function setActiveTab(id: number) {
  activeTab.value = id;
}
</script>

<template>
  <div class="tab-group">
    <ul class="tab-list">
      <TabsBar>
        <Tab
          label="For You"
          :active="activeTab === 0"
          @click="setActiveTab(0)"
        />
        <Tab
          label="Following"
          :active="activeTab === 1"
          @click="setActiveTab(1)"
        />
      </TabsBar>
    </ul>
    <div class="tab-panels">
      <div
        v-show="activeTab === 0"
        class="panel"
      >
        <p>Tab content</p>
      </div>
      <div
        v-show="activeTab === 1"
        class="panel"
      >
        <p>Tab content 2</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Tab } from '@youcan/ui-vue3';

const activeTab = ref(0);

function setActiveTab(id: number) {
  activeTab.value = id;
}
</script>

<template>
  <TabsBar>
    <Tab
      label="For You"
      :active="activeTab === 0"
      @click="setActiveTab(0)"
    />
    <Tab
      label="Following"
      :active="activeTab === 1"
      @click="setActiveTab(1)"
    />
  </TabsBar>
</template>