From a0d64dbe0ce153947de9384670a84a6389b120b0 Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Sat, 26 Aug 2023 21:26:19 -0400
Subject: [PATCH] Create PostListItem component

---
 _components/PostListItem.tsx | 16 ++++++++++++++++
 blog/index.tsx               | 15 ++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 _components/PostListItem.tsx

diff --git a/_components/PostListItem.tsx b/_components/PostListItem.tsx
new file mode 100644
index 0000000..115adf2
--- /dev/null
+++ b/_components/PostListItem.tsx
@@ -0,0 +1,16 @@
+interface Props {
+  post: any;
+}
+
+export default function(props: Props) {
+  return (
+    <li className="post-list-item">
+      <a href={props.post.data.url} className="post-list-title">{props.post.data.title}</a>
+      <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.post.data.date)}</time>
+      <ul className="tag-list">
+        {props.post.data.tags.map(tag => <li className="tag">{tag}</li>)}
+      </ul>
+      <p className="post-list-description">{props.post.data.description}</p>
+    </li>
+  );
+}
diff --git a/blog/index.tsx b/blog/index.tsx
index fd932be..04b4ae4 100644
--- a/blog/index.tsx
+++ b/blog/index.tsx
@@ -1,7 +1,9 @@
 export const title = "Blog";
 export const description = "Hello, stranger. Stay a while and listen.";
 
-export default function({ nav }) {
+export default function({ nav, comp }) {
+  const { PostListItem } = comp;
+
   const sortPosts = (a,b) => {
     if (a.data.date < b.data.date) {
       return 1;
@@ -24,16 +26,7 @@ export default function({ nav }) {
 
   return (
     <ul className="post-list">
-      {nav.menu("/blog/posts").children.sort(sortPosts).map(post => (
-        <li className="post-list-item">
-          <a href={post.data.url} className="post-list-title">{post.data.title}</a>
-          <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time>
-          <ul className="tag-list">
-            {post.data.tags.map(tag => <li className="tag">{tag}</li>)}
-          </ul>
-          <p className="post-list-description">{post.data.description}</p>
-        </li>
-      ))}
+      {nav.menu("/blog/posts").children.sort(sortPosts).map(post => <PostListItem post={post}/>)}
     </ul>
   );
 }