feat: governance tabs

src/modules/[chain]/gov/index.vue

@@ -2,34 +2,40 @@
 import { useGovStore } from '@/stores';
 import ProposalListItem from '@/components/ProposalListItem.vue';
 import { ref, onMounted } from 'vue';
-const tab = ref('');
+const tab = ref('2');
 const store = useGovStore();
 
 onMounted(() => {
   store.fetchProposals('2');
 });
+
+const changeTab = (val: '2' | '3' | '4') => {
+  tab.value = val;
+  store.fetchProposals(val);
+};
 </script>
 <template>
-  <div>
-    <VTabs v-model="tab" class="v-tabs-pill">
-      <VTab value="2">Voting</VTab>
-      <VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
-      <VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
-    </VTabs>
-    <VWindow v-model="tab" class="mt-5">
-      <VWindowItem value="2">
-        <ProposalListItem :proposals="store?.proposals['2']" />
-      </VWindowItem>
-
-      <VWindowItem value="3">
-        <ProposalListItem :proposals="store?.proposals['3']" />
-      </VWindowItem>
-
-      <VWindowItem value="4">
-        <ProposalListItem :proposals="store?.proposals['4']" />
-      </VWindowItem>
-    </VWindow>
+  <div class="tabs tabs-boxed bg-transparent mb-4">
+    <a
+      class="tab text-gray-400 uppercase"
+      :class="{ 'tab-active': tab === '2' }"
+      @click="changeTab('2')"
+      >Voting</a
+    >
+    <a
+      class="tab text-gray-400 uppercase"
+      :class="{ 'tab-active': tab === '3' }"
+      @click="changeTab('3')"
+      >Passed</a
+    >
+    <a
+      class="tab text-gray-400 uppercase"
+      :class="{ 'tab-active': tab === '4' }"
+      @click="changeTab('4')"
+      >Rejected</a
+    >
   </div>
+  <ProposalListItem :proposals="store?.proposals[tab]" />
 </template>
 <route>
   {
@@ -37,4 +43,4 @@ onMounted(() => {
       i18n: 'governance'
     }
   }
-  </route>
+</route>

tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
       {
         light: {
           ...require('daisyui/src/colors/themes')['[data-theme=light]'],
+          primary: '#666cff',
           info: '#666CFF',
           'base-content': '#e9eaeb'
         },
@@ -28,6 +29,7 @@ module.exports = {
       {
         dark: {
           ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
+          primary: '#666cff',
           info: '#666CFF',
           'base-100': '#2a334c',
           'base-content': '#373f57'