Greatly improve postCard design

web/src/components/postList/postCard.astro

@@ -1,27 +1,41 @@
 ---
-import { getFormattedDate } from "@utils/date"
+import { calcReadTime } from "@utils/post"
 import { authPB } from "@utils/pocketbase"
+import PostInfo from "@components/post/postInfo"
 
 const pb = await authPB()
 const { p } = Astro.props
+
+const wordCount = p.content.split(' ').length;
+const readTime = calcReadTime(wordCount);
 ---
 
-<div class="mb-8 pb-4 md:pb-8 border-b border-gray-200 last:border-b-0 flex flex-col md:flex-row gap-4 md:gap-3">
+<div class="mb-8 pb-7 md:pb-8 border-b border-gray-200 last:border-b-0 flex flex-col md:flex-row gap-4 md:gap-3">
     <!-- Text content on left -->
     <div class="flex-1  flex flex-col justify-start order-2 md:order-1">
         
-        <time datetime={p.publishDate} class="text-sm text-gray-500">{getFormattedDate(p.publishDate)}</time>
         <a href={`/posts/${p.slug}/`} rel="prefetch" class="no-underline hover:underline">
-            <h2 class="text-xl font-bold ">{p.title}</h2>
+            <h2 class="text-xl ">{p.title}</h2>
         </a>
         {
             p.description !== "" &&
-            <q class="line-clamp-3 block italic text-gray-700">{p['description']}</q>
+            <p class="line-clamp-3 block italic text-gray-600">{p.description}</p>
         }
+
+        <div class="flex flex-row gap-1">
+            <PostInfo
+                publishDate={p.publishDate},
+                wordCount={wordCount},
+                readTime={readTime},
+                tags={p.tags}
+            />
+        </div>
     </div>
+
+    
     
     <!-- Image on right -->
-    <div class="md:w-80 order-1 md:order-2">
+    <div class="md:min-w-80 md:max-w-1/2 order-1 md:order-2">
         <a href={`/posts/${p.slug}/`} rel="prefetch">
             <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-sm w-full h-48 md:h-full object-cover" alt={p['title']}/>
         </a>