add blog posts

src/components/BlogPostCard.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+  id: string;
+  date: Date;
+  title: string;
+  description: string;
+  tags?: string[];
+}
+
+const { id, date, title, description, tags } = Astro.props;
+---
+
+<a href={`/posts/${id}`}>
+  <div class="rounded-lg p-4 bg-zinc-800">
+    <div class="flex items-center text-zinc-400 text-sm mb-2">
+      {
+        date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        })
+      }
+    </div>
+    <h2 class="text-2xl font-semibold mb-1">{title}</h2>
+    <p class="text-sm mb-3">{description}</p>
+    <div class="flex flex-wrap gap-2">
+      {
+        tags?.map((tag) => (
+          <span class="text-xs text-zinc-400 font-semibold">#{tag}</span>
+        ))
+      }
+    </div>
+  </div>
+</a>