Posts working

src/components/PostCard.astro

@@ -0,0 +1,48 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+export interface Props {
+  post: CollectionEntry<'blog'>;
+}
+
+const { post } = Astro.props;
+const { title, description: blurb, pubDate } = post.data;
+const { slug } = post;
+---
+
+<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
+  <div class="card-body p-4 sm:p-6">
+    <h2 class="card-title text-base-100 justify-center text-center break-words h-14 min-h-14 max-h-14 overflow-hidden">
+      {title}
+    </h2>
+
+    <p class="text-center text-base-100 break-words h-20 min-h-20 max-h-20 overflow-hidden text-ellipsis">
+      {blurb || 'No description available.'}
+    </p>
+
+    <div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span>
+        {new Date(pubDate).toLocaleDateString("en-us", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        })}
+      </span>
+    </div>
+
+    <div class="card-actions justify-end mt-4">
+      <a
+        href={`/blog/${slug}`}
+        class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
+        aria-label={`Read more about ${title}`}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-lg">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+        </svg>
+      </a>
+    </div>
+  </div>
+</div>