From fd221916cfd44112d6d486dc64cde797f03be564 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 10:08:28 +0800
Subject: [PATCH] feat: dashboard tab UI refactor

---
 src/components/charts/PriceMarketChart.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 24443493..75953b1c 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -26,12 +26,25 @@ const series = computed(() => {
     },
   ];
 });
+
+function changeChart(type: string){
+  kind.value = type
+}
 </script>
 
 <template>
-  <VTabs v-model="kind" align-tabs="end"
-    ><VTab value="price">Price</VTab><VTab value="volume">Volume</VTab></VTabs
-  >
+  <div class="tabs tabs-boxed bg-transparent justify-end">
+    <a class="tab mr-2 text-gray-400 uppercase" 
+      :class="{'tab-active': kind ==='price' }"
+      @click="changeChart('price')">
+      Price
+    </a>
+    <a class="tab text-gray-400 uppercase" 
+      :class="{'tab-active': kind ==='volume' }"
+      @click="changeChart('volume')">
+      Volume
+    </a>
+  </div>
   <VueApexCharts
     type="area"
     height="261"