<template>
  <div class="trezo-tabs" id="trezo-tabs">
    <ul
      class="navs mb-[20px] border-b border-gray-100 dark:border-[#172036]"
    >
      <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
        <button
          type="button"
          :class="[
            'nav-link block pb-[8px] transition-all relative font-medium',
            { active: activeTab === 'tab1' },
          ]"
          @click="setActiveTab('tab1')"
        >
          Tab 1
        </button>
      </li>
      <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
        <button
          type="button"
          :class="[
            'nav-link block pb-[8px] transition-all relative font-medium',
            { active: activeTab === 'tab2' },
          ]"
          @click="setActiveTab('tab2')"
        >
          Tab 2
        </button>
      </li>
      <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
        <button
          type="button"
          :class="[
            'nav-link block pb-[8px] transition-all relative font-medium',
            { active: activeTab === 'tab3' },
          ]"
          @click="setActiveTab('tab3')"
        >
          Tab 3
        </button>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane" v-show="activeTab === 'tab1'">
        <p>Tab 1 - Hello World!</p>
      </div>
      <div class="tab-pane" v-show="activeTab === 'tab2'">
        <p>Tab 2 - Hello World!</p>
      </div>
      <div class="tab-pane" v-show="activeTab === 'tab3'">
        <p>Tab 3 - Hello World!</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
name: "BasicTabs",
setup() {
const activeTab = ref("tab1");

const setActiveTab = (tab: string) => {
  activeTab.value = tab;
};

return {
  activeTab,
  setActiveTab,
};
},
});
</script>

  <template>
  <div class="trezo-tabs" id="trezo-tabs">
    <ul
      class="navs mb-[20px] border-b border-gray-100 dark:border-[#172036]"
    >
      <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
        <button
          type="button"
          :class="[
            'nav-link flex items-center gap-[4px] pb-[8px] transition-all relative font-medium',
            { active: activeTab === 'iconTab1' },
          ]"
          @click="setActiveTab('iconTab1')"
        >
          <i class="material-symbols-outlined !text-[20px]"> home </i>
          Tab 1
        </button>
      </li>
      <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
        <button
          type="button"
          :class="[
            'nav-link flex items-center gap-[4px] pb-[8px] transition-all relative font-medium',
            { active: activeTab === 'iconTab2' },
          ]"
          @click="setActiveTab('iconTab2')"
        >
          <i class="material-symbols-outlined !text-[20px]"> home </i>
          Tab 2
        </button>
      </li>
      <li class="nav-item inline-block ltr:mr-[20px] rtl:ml-[20px]">
        <button
          type="button"
          :class="[
            'nav-link flex items-center gap-[4px] pb-[8px] transition-all relative font-medium',
            { active: activeTab === 'iconTab3' },
          ]"
          @click="setActiveTab('iconTab3')"
        >
          <i class="material-symbols-outlined !text-[20px]"> home </i>
          Tab 3
        </button>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane" v-show="activeTab === 'iconTab1'">
        <p>Icon Tab 1 - Hello World!</p>
      </div>
      <div class="tab-pane" v-show="activeTab === 'iconTab2'">
        <p>Icon Tab 2 - Hello World!</p>
      </div>
      <div class="tab-pane" v-show="activeTab === 'iconTab3'">
        <p>Icon Tab 3 - Hello World!</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "IconTabs",
  setup() {
    const activeTab = ref("iconTab1");

    const setActiveTab = (tab: string) => {
      activeTab.value = tab;
    };

    return {
      activeTab,
      setActiveTab,
    };
  },
});
</script>