From e1c62c086fb10a53eccaba844e51d50109e9325e Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Thu, 27 Apr 2023 00:18:13 +0800
Subject: [PATCH] feat: component extraction

---
 src/components/CardParameter.vue     | 22 ++++++++++++++++++++++
 src/modules/[chain]/params/index.vue | 28 +++++++++++++---------------
 2 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/components/CardParameter.vue

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
new file mode 100644
index 00000000..e66877b8
--- /dev/null
+++ b/src/components/CardParameter.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+const props = defineProps({
+    cardItem: {
+        type: Object as PropType<{title: string;items: Array<any>;}>,
+    },
+})
+
+</script>
+<template>
+    <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6" 
+    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0">
+            <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
+            <div class="grid grid-cols-5 gap-4">
+                <div v-for="(item,index) of props.cardItem?.items" :key="index" class="rounded-sm bg-active px-4 py-2">
+                    <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
+                    <div class="text-base text-main">{{ item?.value }}</div>
+                    <!-- {{ item }} -->
+                </div>
+            </div>
+        </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index a8a78cfb..9308e665 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -1,14 +1,12 @@
 <script lang="ts" setup>
 import { useParamStore } from '@/stores';
 import { ref, onMounted } from 'vue'
-
+import CardParameter from '@/components/CardParameter.vue'
 const store = useParamStore()
 const chain = ref(store.chain)
 onMounted(() => {
     // fetch the data
-    // store.handleBaseBlockLatest()
     store.initial()
-    console.log(4444)
 })
 
 </script>
@@ -21,22 +19,22 @@ onMounted(() => {
                 <div v-for="(item,index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2">
                     <div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
                     <div class="text-base text-main">{{ item.value }}</div>
-                    {{ item }}
                 </div>
             </div>
         </div>
-        <div class="h-6"></div>
+
+        <!-- minting Parameters  -->
+        <CardParameter :cardItem="store.mint"/>
+        
         <!-- Staking Parameters  -->
-        <div class="bg-card px-4 pt-3 pb-4 rounded-sm">
-            <div class="text-base mb-3 text-main">{{ store.staking.title }}</div>
-            <div class="grid grid-cols-5 gap-4">
-                <div v-for="(item,index) of store.staking.items" :key="index" class="rounded-sm bg-active px-4 py-2">
-                    <div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
-                    <div class="text-base text-main">{{ item.value }}</div>
-                    {{ item }}
-                </div>
-            </div>
-        </div>
+        <CardParameter :cardItem="store.staking"/>
+
+        <!-- Governance Parameters -->
+
+        <!-- Distribution Parameters -->
+        <!-- Slashing Parameters -->
+        <!-- Application Version -->
+        <!-- Node Information -->
     </div>
 
 </template>