From 38595efaf60a6b5cd3dd9c85f63b52907a992066 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 29 Jul 2023 15:47:19 +0530
Subject: [PATCH] fix: replaced TabView component with Tab Component from
 headlessui

---
 frontend/src/components/TabView.vue | 39 -----------------------------
 frontend/src/pages/Lead.vue         | 36 ++++++++++++++++++++------
 2 files changed, 28 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/src/components/TabView.vue

diff --git a/frontend/src/components/TabView.vue b/frontend/src/components/TabView.vue
deleted file mode 100644
index cabe6bc1..00000000
--- a/frontend/src/components/TabView.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div id="tabs-header" class="flex items-center gap-6 border-b pl-5">
-    <div
-      class="cursor-pointer flex items-center gap-2 py-2 border-b hover:text-gray-900 hover:border-gray-400 -mb-[1px]"
-      :class="
-        activeTab == tab.label
-          ? 'border-blue-500 text-gray-900 hover:border-blue-500'
-          : 'border-transparent text-gray-700'
-      "
-      v-for="tab in tabs"
-      :key="tab.label"
-      @click="activeTab = tab.label"
-    >
-      <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-      {{ tab.label }}
-    </div>
-  </div>
-  <div id="tabs-contents" class="flex h-full">
-    <div class="flex-1 bg-gray-50">
-      <div v-for="tab in tabs" :key="tab.label">
-        <div v-if="activeTab == tab.label" class="p-6">
-          <slot name="tab-content" v-bind="{ tab }" />
-        </div>
-      </div>
-    </div>
-    <slot name="details" />
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  tabs: {
-    type: Array,
-    required: true,
-  },
-})
-let activeTab = ref(props.tabs[0].label)
-</script>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 88953f21..1e97cf27 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -54,17 +54,36 @@
       <Button icon="more-horizontal" />
     </template>
   </LayoutHeader>
-  <TabView v-if="lead.doc" :tabs="tabs">
-    <template #tab-content="{ tab }">
-      <div>{{ tab.label }}</div>
-    </template>
-    <template #details>
+  <TabGroup v-if="lead.doc">
+    <TabList class="flex items-center gap-6 border-b pl-5">
+      <Tab
+        as="template"
+        v-for="tab in tabs"
+        :key="tab.label"
+        v-slot="{ selected }"
+      >
+        <button
+          class="flex items-center gap-2 py-2 border-b hover:text-gray-900 -mb-[1px]"
+          :class="
+            selected
+              ? 'border-blue-500 text-gray-900 hover:border-blue-500'
+              : 'border-transparent text-gray-700 hover:border-gray-400'
+          "
+        >
+          <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+          {{ tab.label }}
+        </button>
+      </Tab>
+    </TabList>
+    <TabPanels class="flex h-full">
+      <TabPanel class="flex-1 bg-gray-50" v-for="tab in tabs">
+        <div class="p-6">{{ tab.label }}</div>
+      </TabPanel>
       <div class="w-[390px] border-l px-6 py-3">{{ lead.doc.lead_name }}</div>
-    </template>
-  </TabView>
+    </TabPanels>
+  </TabGroup>
 </template>
 <script setup>
-import TabView from '@/components/TabView.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -72,6 +91,7 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import LayoutHeader from '../components/LayoutHeader.vue'
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import {
   createDocumentResource,
   Avatar,