io

components/i/library/Header.vue

@@ -17,6 +17,7 @@
                         <div class="flex items-center text-xl gap-2">
                             <UIcon name="i-heroicons-squares-2x2" />
                             <div>{{ collect }}</div>
+                            <UBadge color="gray" variant="soft" :label="count" />
                         </div>
                     </template>
                 </div>
@@ -43,6 +44,10 @@ defineProps({
     description: {
         type: String,
         default: ''
+    },
+    count: {
+        type: Number,
+        default: 0
     }
 })
 const searchQuery = ref('')

pages/library/[id].vue

 <template>
     <div class="w-full items-center flex flex-col">
-        <ILibraryHeader v-if="currentCollect" :collect="currentCollect.name" :description="currentCollect.description" />
+        <ILibraryHeader
+            v-if="currentCollect"
+            :collect="currentCollect.name"
+            :description="currentCollect.description"
+            :count="currentCollect.record_count"
+        />
         <div class="container max-w-screen-lg flex flex-col p-6">
             <div class="flex gap-10">
                 <div class="flex flex-col flex-grow">