feat: add blog post listing and UI components for the blog

1 files changed, 34 insertions, 0 deletions

diff --git a/src/components/BlogPosts.astro b/src/components/BlogPosts.astro
new file mode 100644
index 0000000..54b7529
--- /dev/null
+++ b/src/components/BlogPosts.astro
@@ -0,0 +1,34 @@
+---
+import { getCollection } from 'astro:content';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+// Fetch all blog posts from the content collection
+const posts = await getCollection('blog');
+
+// Sort posts by date (newest first)
+const sortedPosts = posts.sort((a, b) => 
+  new Date(b.data.publishDate).getTime() - new Date(a.data.publishDate).getTime()
+);
+---
+
+<div class="w-full max-w-2xl mx-auto p-4">
+    <h1 class="text-3xl font-bold mb-8">Blog Posts</h1>
+    <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">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>{post.data.title}</CardTitle>
+                        <CardDescription>{post.data.description}</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="flex justify-between text-sm text-gray-500">
+                            <span>{post.data.publishDate.toLocaleDateString()}</span>
+                            <span>by {post.data.author}</span>
+                        </div>
+                    </CardContent>
+                </Card>
+            </a>
+        ))}
+    </div>
+</div>
\ No newline at end of file