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.

3 files changed, 43 insertions, 47 deletions

diff --git a/src/components/BlogPostCard.astro b/src/components/BlogPostCard.astro
new file mode 100644
index 0000000..875ddca
--- /dev/null
+++ b/src/components/BlogPostCard.astro
@@ -0,0 +1,34 @@
+---
+import { Card, CardContent, CardDescription, CardHeader, CardFooter } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+interface Props {
+  title: string;
+  slug: string;
+  description: string;
+  author: string;
+  publishDate: Date;
+}
+
+const { title, slug, description, author, publishDate } = Astro.props as Props;
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'long',
+  year: 'numeric',
+});
+---
+
+<Card className="border rounded-none">
+    <CardHeader className="border-b">
+        <h2 class="font-heading text-sm font-medium" transition:name={`post-title-${slug}`}>{title}</h2>
+        <CardDescription>{description}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="flex flex-wrap gap-2">
+        <Badge variant="secondary">{author}</Badge>
+        <Badge variant="outline">{dateFormatter.format(publishDate)}</Badge>
+      </div>
+    </CardContent>
+</Card>
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>
diff --git a/src/components/PostHeader.astro b/src/components/PostHeader.astro
deleted file mode 100644
index cea0965..0000000
--- a/src/components/PostHeader.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
-
-interface Props {
-  title: string;
-  slug: string;
-  description: string;
-  author: string;
-  publishDate: Date;
-}
-
-const { title, slug, description, author, publishDate } = Astro.props as Props;
-
-const dateFormatter = new Intl.DateTimeFormat('en-GB', {
-  day: '2-digit',
-  month: 'long',
-  year: 'numeric',
-});
----
-
-<Card className="w-full">
-  <CardHeader>
-    <div class="flex flex-wrap gap-2">
-      <Badge variant="secondary">{author}</Badge>
-      <Badge variant="outline">{dateFormatter.format(publishDate)}</Badge>
-    </div>
-    <h1 class="font-heading text-xl font-medium md:text-2xl" transition:name={`post-title-${slug}`}>{title}</h1>
-    <CardDescription>{description}</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <Separator />
-  </CardContent>
-</Card>