From 1d3095ceffc4cf72c0bc8ab5b62c5821ac885a6d Mon Sep 17 00:00:00 2001
From: Le Minh Tri <ansidev@gmail.com>
Date: Sat, 25 Feb 2023 07:14:04 +0700
Subject: [PATCH 1/2] feat(component): add component PostList

---
 src/components/post/PostList.astro | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/components/post/PostList.astro

diff --git a/src/components/post/PostList.astro b/src/components/post/PostList.astro
new file mode 100644
index 00000000..7f69d10b
--- /dev/null
+++ b/src/components/post/PostList.astro
@@ -0,0 +1,22 @@
+---
+import type { CollectionEntry } from 'astro:content'
+
+import PostItem from '@/components/post/PostItem.astro'
+
+export interface Props {
+  posts: CollectionEntry<any>[];
+}
+
+const { posts = [] } = Astro.props
+---
+
+<div role="list" class="grid grid-cols-1 gap-4">
+  {
+    posts.map((p) => (
+      <PostItem
+        title={`${p.data.title}`}
+        href={`/${p.slug}`}
+      />
+    ))
+  }
+</div>

From d560b1501b567cc827990f29a130e47c4c6e8cfc Mon Sep 17 00:00:00 2001
From: Le Minh Tri <ansidev@gmail.com>
Date: Sat, 25 Feb 2023 07:14:19 +0700
Subject: [PATCH 2/2] feat(page): update homepage

---
 src/pages/index.astro | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8f4e4ebf..deea56c1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,13 @@
 ---
 import { getCollection } from 'astro:content'
 
-import PostItem from '@/components/post/PostItem.astro'
+import PostList from '@/components/post/PostList.astro'
 import siteConfig from '@/configs/site'
 import AppLayout from '@/layouts/AppLayout.astro'
 
 const { title, description, author } = siteConfig
 
-const allPosts = await getCollection('leetcode-solutions')
+const posts = await getCollection('leetcode-solutions')
 ---
 
 <AppLayout
@@ -17,12 +17,6 @@ const allPosts = await getCollection('leetcode-solutions')
   headerCssClasses="max-w-xl px-8"
 >
   <main class="mx-auto my-4 p-4 max-w-xl text-site-header-text">
-    <div role="list" class="grid grid-cols-1 gap-4">
-      {
-        allPosts.map((p) => (
-          <PostItem href={`/${p.slug}`} title={p.data.title} />
-        ))
-      }
-    </div>
+    <PostList posts={posts} />
   </main>
 </AppLayout>