Posts working

src/pages/posts.astro

@@ -0,0 +1,30 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+import PostCard from "../components/PostCard.astro";
+
+// Get all blog posts from the content collection
+const posts = await getCollection("blog");
+
+// Sort posts by date, newest first
+const sortedPosts = posts.sort(
+  (a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
+);
+---
+
+<Layout>
+  <div class="min-h-screen p-4 sm:p-8">
+    <h1 class="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8 text-center">
+      Posts
+    </h1>
+    <div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
+      {sortedPosts.map((post: CollectionEntry<"blog">) => (
+        <PostCard post={post} />
+      ))}
+    </div>
+    
+    {sortedPosts.length === 0 && (
+      <p class="text-center text-gray-500 mt-12">No posts available yet. Check back soon!</p>
+    )}
+  </div>
+</Layout>