feat: blog post card component

Author: lucsmachado

src/components/BlogPost.astro

@@ -0,0 +1,28 @@
+---
+import { Icon } from "astro-icon";
+import DateTime from "./DateTime.astro";
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  post: CollectionEntry<"posts">;
+}
+
+const { post } = Astro.props;
+---
+
+<li class="">
+  <a
+    href={`/posts/${post.slug}`}
+    class="relative block overflow-hidden rounded-lg border border-gray-600 p-4 sm:p-6 lg:p-8 bg-slate-800 hover:border-teal-300 transition-colors duration-300"
+  >
+    <span
+      class="absolute inset-x-0 bottom-0 h-2 bg-gradient-to-r from-teal-300 via-blue-500 to-purple-600"
+    ></span>
+    <h3 class="text-lg text-teal-300 pb-1">{post.data.title}</h3>
+    <div class="flex gap-2">
+      <Icon class="w-4" name="lucide:calendar" />
+      <DateTime pubDate={post.data.pubDate} />
+    </div>
+    <p class="pt-4">{post.data.description}</p>
+  </a>
+</li>

src/components/DateTime.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  pubDate: Date;
+}
+
+const { pubDate } = Astro.props;
+
+const formatDate = (date: Date): string => {
+  const nth = (day: number): string => {
+    if (day > 3 && day < 21) return "th";
+    switch (day % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  };
+
+  const parts = new Intl.DateTimeFormat("en-US", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  }).formatToParts(date);
+
+  return parts
+    .map((part) => {
+      if (part.type === "day") {
+        return `${part.value}${nth(parseInt(part.value))}`;
+      }
+      return part.value;
+    })
+    .join("");
+};
+---
+
+<p>{formatDate(pubDate)}</p>

src/layouts/BlogLayout.astro

@@ -1,38 +1,8 @@
 ---
 import Layout from "./Layout.astro";
+import DateTime from "../components/DateTime.astro";
 
 const { frontmatter } = Astro.props;
-
-const formatDate = (date: Date): string => {
-  const nth = (day: number): string => {
-    if (day > 3 && day < 21) return "th";
-    switch (day % 10) {
-      case 1:
-        return "st";
-      case 2:
-        return "nd";
-      case 3:
-        return "rd";
-      default:
-        return "th";
-    }
-  };
-
-  const parts = new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  }).formatToParts(date);
-
-  return parts
-    .map((part) => {
-      if (part.type === "day") {
-        return `${part.value}${nth(parseInt(part.value))}`;
-      }
-      return part.value;
-    })
-    .join("");
-};
 ---
 
 <Layout title={frontmatter.title} description={frontmatter.description}>
@@ -42,7 +12,7 @@ const formatDate = (date: Date): string => {
     <h1 class="leading-tight font-bold text-3xl text-slate-200">
       {frontmatter.title}
     </h1>
-    <p class="pt-2 pb-8">{formatDate(frontmatter.pubDate)}</p>
+    <DateTime pubDate={frontmatter.pubDate} />
     <slot />
     <p class="pt-8 font-medium text-slate-200">
       Written by {frontmatter.author}

src/pages/blog.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
+import BlogPost from "../components/BlogPost.astro";
 
 const metadata = {
   title: "The Lucas Machado Blog",
@@ -23,13 +24,7 @@ const postCollection = await getCollection("posts");
         Posts
       </h2>
       <ul>
-        {
-          postCollection.map((post) => (
-            <li>
-              <a href={`/posts/${post.slug}`}>{post.data.title}</a>
-            </li>
-          ))
-        }
+        {postCollection.map((post) => <BlogPost post={post} />)}
       </ul>
     </div>
   </div>