From b8b56021948ec4b9e0d66c3e1da971010ba39ba2 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 21:45:44 +0800
Subject: [PATCH] feat: add Parameters Page

---
 packages/dashboard/src/pages/[...all].vue | 43 +++++++++++++++--------
 src/components/ProposalListItem.vue       | 15 +++++---
 src/modules/[chain]/Parameters.vue        | 12 +++++++
 3 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/modules/[chain]/Parameters.vue

diff --git a/packages/dashboard/src/pages/[...all].vue b/packages/dashboard/src/pages/[...all].vue
index e5a39b58..0d6bd766 100644
--- a/packages/dashboard/src/pages/[...all].vue
+++ b/packages/dashboard/src/pages/[...all].vue
@@ -1,29 +1,44 @@
 <script setup lang="ts">
-import misc404 from '@images/pages/404.png'
+import misc404 from "@images/pages/404.png";
 
-import miscObj from '@images/pages/misc-404-object.png'
-import miscMaskDark from '@images/pages/misc-mask-dark.png'
-import miscMaskLight from '@images/pages/misc-mask-light.png'
+import miscObj from "@images/pages/misc-404-object.png";
+import miscMaskDark from "@images/pages/misc-mask-dark.png";
+import miscMaskLight from "@images/pages/misc-mask-light.png";
 
-import { useGenerateImageVariant } from '@/plugins/vuetify/@core/composable/useGenerateImageVariant'
+import { useGenerateImageVariant } from "@/plugins/vuetify/@core/composable/useGenerateImageVariant";
 
-const miscThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
+const miscThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark);
 </script>
 
 <template>
   <div class="misc-wrapper">
-    <ErrorHeader error-code="404" error-title="Page Not Found ⚠️"
-      error-description="We couldn't find the page you are looking for." />
+    <ErrorHeader
+      error-code="404"
+      error-title="Page Not Found ⚠️"
+      error-description="We couldn't find the page you are looking for."
+    />
 
     <!-- 👉 Image -->
     <div class="misc-avatar w-100 text-center">
-      <VImg :src="misc404" alt="Coming Soon" :height="$vuetify.display.xs ? 400 : 500" class="my-sm-4" />
-      <VBtn to="/" class="mt-10">
-        Back to Home
-      </VBtn>
-      <VImg :src="miscThemeMask" class="d-none d-md-block footer-coming-soon" cover />
+      <VImg
+        :src="misc404"
+        alt="Coming Soon"
+        :height="$vuetify.display.xs ? 400 : 500"
+        class="my-sm-4"
+      />
+      <VBtn to="/" class="mt-10"> Back to Home </VBtn>
+      <VImg
+        :src="miscThemeMask"
+        class="d-none d-md-block footer-coming-soon"
+        cover
+      />
 
-      <VImg :src="miscObj" class="d-none d-md-block footer-coming-soon-obj" :max-width="174" height="158" />
+      <VImg
+        :src="miscObj"
+        class="d-none d-md-block footer-coming-soon-obj"
+        :max-width="174"
+        height="158"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index ef002436..9681016d 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -33,9 +33,11 @@ const statusMap: Record<string, string> = {
       class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
     >
       <div class="grid grid-cols-6 md:grid-cols-11 flex-1">
-        <div class="text-textMain dark:text-white mb-3">#{{ item?.proposal_id }}</div>
+        <div class="text-main dark:text-white mb-3">
+          #{{ item?.proposal_id }}
+        </div>
 
-        <div class="col-span-5 md:pr-10 text-textMain dark:text-white truncate">
+        <div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
           {{ item?.content?.title }}
         </div>
 
@@ -67,7 +69,9 @@ const statusMap: Record<string, string> = {
                 : 'bg-info'
             "
           ></div>
-          <div class="text-xs">{{ statusMap?.[item?.status] || item?.status }}</div>
+          <div class="text-xs">
+            {{ statusMap?.[item?.status] || item?.status }}
+          </div>
         </div>
 
         <div
@@ -76,7 +80,10 @@ const statusMap: Record<string, string> = {
           {{ format.toDay(item.voting_end_time, 'from') }}
         </div>
       </div>
-      <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
+      <ProposalProcess
+        :pool="staking.pool"
+        :tally="item.final_tally_result"
+      ></ProposalProcess>
     </RouterLink>
   </div>
 </template>
diff --git a/src/modules/[chain]/Parameters.vue b/src/modules/[chain]/Parameters.vue
new file mode 100644
index 00000000..29ce3712
--- /dev/null
+++ b/src/modules/[chain]/Parameters.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="text-main text-h5 mb-4">Parameters</div>
+  <div class="bg-card px-4 pt-3 pb-4 rounded-sm">
+    <div class="text-base mb-3 text-main">Minting Parameters</div>
+    <div class="grid grid-cols-5 gap-4">
+      <div v-for="item in 10" :key="item" class="rounded-sm bg-active px-4 py-2">
+        <div class="text-xs mb-2 text-secondary">Blocks Per Year</div>
+        <div class="text-base text-main">4,360,000</div>
+      </div>
+    </div>
+  </div>
+</template>