responsive stuff

src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
-import { format } from "date-fns";
 import { Markup } from "astro-remote";
 
 import Layout from "../layouts/Layout.astro";
+import BlogHeader from "../components/BlogHeader.astro";
 
 const response = await fetch(
   `https://api.cosmicjs.com/v2/buckets/${
@@ -26,13 +26,7 @@ const posts = await response.json();
             </div>
           ) : null}
           <div>
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
-              <h4>{post.title}</h4>
-              <h5>{`🗓️ ${format(
-                new Date(post.published_at),
-                "MMM do, y"
-              )}`}</h5>
-            </div>
+            <BlogHeader title={post.title} date={post.published_at} />
             <Markup content={`<p>${post.content.split("</p>")[0]}`} />
             <a href={`/posts/${post.slug}`}>Read More</a>
           </div>