💄 Add title to collector table (#1448)

* 💄 Add title to collectorList table * 🎨 Improve code formatting * ♻️ Refactor title row using v-for
likecoin · Dec 6, 2023 · f9d4313 · f9d4313
1 parent bc7c744
commit f9d4313
Showing 1 changed file with 39 additions and 8 deletions.
diff --git a/src/components/NFTPage/CollectorList/index.vue b/src/components/NFTPage/CollectorList/index.vue
@@ -13,6 +13,22 @@
         <div :class="contentPaddingClass">
           <table class="w-full">
             <tbody class="w-full">
+              <tr class="w-full border-b-shade-gray border-b-[1px]">
+                <td
+                  v-for="(text, index) in tableHeaderItems"
+                  :key="index"
+                  class="py-[8px]"
+                >
+                  <Label
+                    class="justify-start text-left text-dark-gray text-[12px] font-500"
+                    :text="text"
+                    tag="div"
+                    valign="middle"
+                    align="left"
+                    content-class="whitespace-nowrap"
+                  />
+                </td>
+              </tr>
               <NFTPageCollectorListItem
                 v-for="owner in trimmedItems"
                 :key="owner.id"
@@ -42,21 +58,29 @@
                   <IconPerson />
                 </template>
               </Label>
-              <Label
-                class="w-min font-600"
-                :text="$t('nft_details_page_label_owning')"
-                preset="h5"
-                valign="middle"
-                content-class="whitespace-nowrap text-like-green "
-                prepend-class="text-like-green"
-              />
             </div>
             <hr class="w-full border-shade-gray" />
           </template>
           <template #content>
             <div class="min-w-[310px]">
               <table class="w-full">
                 <tbody class="w-full">
+                  <tr class="w-full border-b-shade-gray border-b-[1px]">
+                    <td
+                      v-for="(text, index) in tableHeaderItems"
+                      :key="index"
+                      class="py-[8px]"
+                    >
+                      <Label
+                        class="justify-start text-left text-dark-gray text-[12px] font-500"
+                        :text="text"
+                        tag="div"
+                        valign="middle"
+                        align="left"
+                        content-class="whitespace-nowrap"
+                      />
+                    </td>
+                  </tr>
                   <NFTPageCollectorListItem
                     v-for="owner in items"
                     :key="owner.id"
@@ -107,6 +131,13 @@ export default {
     shouldShowMore() {
       return this.items.length > this.trimmedItems.length;
     },
+    tableHeaderItems() {
+      return [
+        this.$t('nft_details_page_title_collector'),
+        this.$t('nft_message_type_generic'),
+        this.$t('nft_details_page_label_owning'),
+      ];
+    },
   },
 };
 </script>