From 63c91260a33c6a3e519312ecbfcf59754a52a611 Mon Sep 17 00:00:00 2001
From: Alex Lau <cyalexlau@yahoo.com.hk>
Date: Sat, 6 Apr 2024 21:58:12 +0800
Subject: [PATCH] Update blog create date

---
 src/assets/markdown.json      | 3 ++-
 src/components/Blog/index.tsx | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/assets/markdown.json b/src/assets/markdown.json
index e1d3b52..4f85209 100644
--- a/src/assets/markdown.json
+++ b/src/assets/markdown.json
@@ -3,6 +3,7 @@
         "name": "react_caveats",
         "description": "Some caveats on react useCallback / useMemo hook and re-renders",
         "tags": ["react"],
-        "readingTime": 5
+        "readingTime": 5,
+        "createAt": "2024-04-01T13:54:55.951Z"
     }
 ]
\ No newline at end of file
diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
index 79d7336..187fee8 100644
--- a/src/components/Blog/index.tsx
+++ b/src/components/Blog/index.tsx
@@ -18,16 +18,17 @@ type BlogPostRowType = {
     description: string;
     tags: string[];
     readingTime: number;
+    createAt: Date;
 }
 
 function BlogPostRow(props: BlogPostRowType) {
-    const { title, description, tags, readingTime } = props;
+    const { title, description, tags, readingTime, createAt } = props;
     const navigate = useNavigate();
 
     return (
         <div className="grid sm:grid-cols-5 my-3">
             <div className="flex flex-col sm:p-3">
-                <p>Today</p>
+                <p>{`${createAt.toLocaleDateString()}`}</p>
                 <div className="hidden mt-3 w-[100px] h-[100px] bg-cyan-400 sm:block"></div>
             </div>
             <div onClick={() => navigate('react_caveats')} className="sm:col-start-2 sm:col-span-3 flex flex-col sm:p-3 [&>*]:mb-2 hover:bg-slate-400/5 cursor-pointer">
@@ -53,7 +54,7 @@ export default function Blog() {
             <p>Blog page under construction :P</p>
             <h1 className='mt-3 text-4xl'>My thoughts on programming, books, and fun things in life</h1>
             <div className="mt-16 sm:border-l-[0.5px] sm:border-l-slate-700 sm:pl-4 sm:mt-20">
-                {MD_JSON.map((data) => <BlogPostRow key={data.name} title={data.name} description={data.description} readingTime={data.readingTime} tags={data.tags} />)}
+                {MD_JSON.map((data) => <BlogPostRow key={data.name} createAt={new Date(data.createAt)} title={data.name} description={data.description} readingTime={data.readingTime} tags={data.tags} />)}
             </div>
         </div>
     )