fix: list grid

unjs · Dec 1, 2023 · 7ffd4ed · 7ffd4ed
1 parent b5c3487
commit 7ffd4ed
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 35 deletions.
diff --git a/components/blog/BlogCard.vue b/components/blog/BlogCard.vue
@@ -5,7 +5,7 @@ defineProps<{
   path: string
   title: string
   description: string
-  publishedAt: Date
+  publishedAt: string
   authors: Author[]
 }>()
 </script>

diff --git a/components/list/ListGrid.vue b/components/list/ListGrid.vue
@@ -1,19 +1,5 @@
-<script lang="ts" setup generic="T extends { title: string }">
-withDefaults(defineProps<{
-  items?: T[]
-  itemsNotFound?: string
-}>(), {
-  itemsNotFound: 'No items found',
-})
-</script>
-
 <template>
   <ol class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 place-items-stretch">
-    <li v-for="item in items" :key="item.title">
-      <slot :item="item" />
-    </li>
-    <li v-if="items && items.length === 0" class="col-span-1 md:col-span-2 xl:col-span-3 text-center">
-      {{ itemsNotFound }}
-    </li>
+    <slot />
   </ol>
 </template>
diff --git a/components/list/ListGridEmpty.vue b/components/list/ListGridEmpty.vue
@@ -0,0 +1,5 @@
+<template>
+  <li class="col-span-1 md:col-span-2 xl:col-span-3 text-center">
+    <slot />
+  </li>
+</template>
diff --git a/components/list/ListGridItem.vue b/components/list/ListGridItem.vue
@@ -0,0 +1,5 @@
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -138,14 +138,19 @@ const results = sort(filtered)
         </template>
       </ListTopBar>
 
-      <ListGrid v-slot="{ item }" class="mt-8" :items="results" items-not-found="No articles found">
-        <BlogCard
-          :path="item._path!"
-          :title="item.title"
-          :description="item.description"
-          :published-at="item.publishedAt"
-          :authors="item.authors"
-        />
+      <ListGrid class="mt-8">
+        <ListGridItem v-for="item in results" :key="item._path">
+          <BlogCard
+            :path="item._path!"
+            :title="item.title"
+            :description="item.description"
+            :published-at="item.publishedAt"
+            :authors="item.authors"
+          />
+        </ListGridItem>
+        <ListGridEmpty v-if="results && results.length === 0">
+          No articles found
+        </ListGridEmpty>
       </ListGrid>
     </section>
   </Main>

diff --git a/pages/packages/index.vue b/pages/packages/index.vue
@@ -97,16 +97,21 @@ const results = sort(searchResults)
 
       <ListTopBar v-model:search="search" v-model:order="order" v-model:order-by="orderBy" search-placeholder="Search a package" :order-by-options="orderByOptions" />
 
-      <ListGrid v-slot="{ item }" class="mt-8" :items="results" items-not-found="No packages found">
-        <PackageCard
-          v-if="item.title && item.path"
-          :title="item.title"
-          :description="item.description"
-          :path="item.path"
-          :stars="item.stars"
-          :monthly-downloads="item.monthlyDownloads"
-          :contributors="item.contributors"
-        />
+      <ListGrid class="mt-8">
+        <ListGridItem v-for="item in results" :key="item._path">
+          <PackageCard
+            v-if="item.title && item.path"
+            :title="item.title"
+            :description="item.description"
+            :path="item.path"
+            :stars="item.stars"
+            :monthly-downloads="item.monthlyDownloads"
+            :contributors="item.contributors"
+          />
+        </ListGridItem>
+        <ListGridEmpty v-if="results && results.length === 0">
+          No packages found
+        </ListGridEmpty>
       </ListGrid>
     </section>
   </Main>

diff --git a/types/blog.ts b/types/blog.ts
@@ -17,7 +17,7 @@ export interface BlogPost extends ParsedContent {
   authors: Author[]
   categories: string[]
   packages: string[]
-  publishedAt: Date
+  publishedAt: string
   modifiedAt: Date
 }