From e88144ab670e7585f998ce9d54236d5cc77d6bd4 Mon Sep 17 00:00:00 2001
From: IwanIDev <iwan@iwani.dev>
Date: Fri, 27 Mar 2026 16:14:29 +0000
Subject: refactor: made the home page blog post cards and the blog post card
 header more consistent

They are now the same component. I've renamed the component from
PostHeader to BlogPostCard, which is more accurate now.
---
 src/components/BlogPosts.astro | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

(limited to 'src/components/BlogPosts.astro')

diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro
index 48b94f0..87a75f4 100644
--- a/src/components/BlogPosts.astro
+++ b/src/components/BlogPosts.astro
@@ -1,6 +1,8 @@
 ---
 import { getCollection } from 'astro:content';
 import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import PostHeader from "@/components/PostHeader.astro";
 
 // Fetch all blog posts from the content collection
 const posts = await getCollection('blog');
@@ -22,18 +24,13 @@ const dateFormatter = new Intl.DateTimeFormat('en-GB', {
     <div class="space-y-4 max-h-96 overflow-y-auto">
         {sortedPosts.map((post) => (
             <a href={`/posts/${post.id}`} class="block hover:opacity-80 transition-opacity" data-astro-prefetch>
-                <Card className="border rounded-xl">
-                    <CardHeader className="border-b">
-                        <h2 class="font-heading text-sm font-medium" transition:name={`post-title-${post.id}`}>{post.data.title}</h2>
-                        <CardDescription>{post.data.description}</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <div class="flex justify-between text-sm text-gray-500">
-                            <span>{dateFormatter.format(post.data.publishDate)}</span>
-                            <span>by {post.data.author}</span>
-                        </div>
-                    </CardContent>
-                </Card>
+              <PostHeader
+                title={post.data.title}
+                slug={post.id}
+                description={post.data.description}
+                author={post.data.author}
+                publishDate={post.data.publishDate}
+              />
             </a>
         ))}
     </div>
-- 
cgit