feat: create PostElement component for blog post display

- Added a new PostElement component to render individual blog posts with title, publication date, and reading time.
- Updated the blog index page to utilize PostElement instead of PostSummary for improved post presentation.

src/components/PostElement.astro

@@ -0,0 +1,32 @@
+---
+import { type CollectionEntry } from "astro:content";
+import dayjs from "dayjs";
+
+type Props = {
+	readonly post: CollectionEntry<"blog">;
+};
+
+const { post } = Astro.props;
+const { remarkPluginFrontmatter } = await post.render();
+const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
+---
+
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	small {
+		font-size: $fontSizeBase * 0.75;
+		opacity: 0.5;
+	}
+</style>
+
+<li>
+	<a href={`/blog/${post.slug}`}>{post.data.title}</a>
+	<div>
+		<small>
+			<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+			<span>•</span>
+			<span>{remarkPluginFrontmatter.minutesRead}</span>
+		</small>
+	</div>
+</li>

src/pages/blog/index.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import Layout from "../../layouts/BaseLayout.astro";
-import PostSummary from "../../components/PostSummary.astro";
+import PostElement from "../../components/PostElement.astro";
 
 const posts = await getCollection("blog", ({ data }) => {
 	return data.draft !== true;
@@ -12,6 +12,8 @@ posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 
 <Layout>
 	<section style={{ "margin-top": "3rem" }}>
-		{posts.map((post) => <PostSummary post={post} />)}
+		<ul>
+			{posts.map((post) => <PostElement post={post} />)}
+		</ul>
 	</section>
 </Layout>