feat: proposal item

src/components/ProposalListItem.vue

@@ -26,31 +26,42 @@ const statusMap: Record<string, string> = {
 </script>
 <template>
   <div class="bg-white dark:bg-[#28334e] rounded text-sm">
+    <table class="table w-full">
+      <tbody>
+        <tr v-for="(item, index) in proposals?.proposals" :key="index">
+          <td class="px-4 w-10">
+            <RouterLink
+              class="text-main text-base hover:text-indigo-400"
+              :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            >
+              #{{ item?.proposal_id }}
+            </RouterLink>
+          </td>
+          <td class="w-[40%]">
+            <div>
               <RouterLink
                 :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-      v-for="(item, index) in proposals?.proposals"
-      :key="index"
-      class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
+                class="text-main text-base mb-1 block hover:text-indigo-400"
               >
-      <div class="grid grid-cols-6 md:grid-cols-11 flex-1">
-        <div class="text-main dark:text-white mb-3">
-          #{{ item?.proposal_id }}
-        </div>
-
-        <div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
                 {{ item?.content?.title }}
-        </div>
-
-        <div class="col-span-3 mb-3 truncate">
+              </RouterLink>
               <div
                 class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
               >
                 {{ showType(item.content['@type']) }}
               </div>
             </div>
-
+          </td>
+          <td class="w-[30%]">
+            <ProposalProcess
+              :pool="staking.pool"
+              :tally="item.final_tally_result"
+            ></ProposalProcess>
+          </td>
+          <td>
+            <div>
               <div
-          class="flex items-center mb-3"
+                class="flex items-center"
                 :class="
                   statusMap?.[item?.status] === 'PASSED'
                     ? 'text-yes'
@@ -73,17 +84,24 @@ const statusMap: Record<string, string> = {
                   {{ statusMap?.[item?.status] || item?.status }}
                 </div>
               </div>
-
               <div
-          class="truncate mb-3 col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
+                class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
               >
                 {{ format.toDay(item.voting_end_time, 'from') }}
               </div>
             </div>
-      <ProposalProcess
-        :pool="staking.pool"
-        :tally="item.final_tally_result"
-      ></ProposalProcess>
-    </RouterLink>
+          </td>
+
+          <td>
+            <div>
+              <button class="btn btn-xs btn-primary rounded-sm mr-3">
+                Detail
+              </button>
+              <button class="btn btn-xs btn-primary rounded-sm">Vote</button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>

src/components/ProposalProcess.vue

@@ -30,14 +30,35 @@ const veto = computed(() =>
 </script>
 
 <template>
-  <div class="progress rounded-full h-1 text-xs flex items-center">
-    <div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
-    <div class="h-1 bg-no" :style="`width: ${no}`"></div>
+  <div class="progress rounded-[3px] h-7 text-xs flex items-center">
     <div
-      class="h-1"
-      :style="`width: ${veto}; background-color: #B71C1C;`"
-    ></div>
-    <div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
+      class="h-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
+      :style="`width: ${yes}`"
+      :title="yes"
+    >
+      {{ yes }}
+    </div>
+    <div
+      class="h-7 bg-no flex items-center overflow-hidden"
+      :style="`width: ${no}`"
+      :title="no"
+    >
+      {{ no }}
+    </div>
+    <div
+      class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
+      :style="`width: ${veto};`"
+      :title="veto"
+    >
+      {{ veto }}
+    </div>
+    <div
+      class="h-7 bg-secondary flex items-center overflow-hidden"
+      :style="`width: ${abstain}`"
+      :title="abstain"
+    >
+      {{ abstain }}
+    </div>
   </div>
 </template>
 <style scoped>

src/layouts/components/Breadcrumbs.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useBlockchain } from '@/stores/useBlockchain';
-import { Icon } from '@iconify/vue';
-import { computed } from '@vue/reactivity';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-const chain = useBlockchain();
-const route = useRoute();
-const i18n = useI18n();
-/// To display human readable module name, we have to set the prefix("module.") + route name to the key in i18n.
-/// such as `module.chain` = 'Dashboard'
-const moduleName = computed(() =>
-  i18n.t(`module.${route.name?.toString() || ''}`)
-);
-const items = computed(() => [
-  { title: String(chain.name).toUpperCase(), href: `/${chain.name}` },
-  moduleName.value,
-]);
-</script>
-<template>
-  <div class="d-flex flex-rows align-center">
-    <span class="text-h5 mr-3">{{ moduleName }}</span>
-    <Icon icon="mdi-dots-vertical" />
-    <VBreadcrumbs :items="items">
-      <template v-slot:divider>
-        <Icon icon="mdi-chevron-right" />
-      </template>
-    </VBreadcrumbs>
-  </div>
-</template>