1 files changed, 40 insertions, 0 deletions
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro
new file mode 100644
index 0000000..8b4b7c4
--- /dev/null
+++ b/src/components/PostElement.astro
@@ -0,0 +1,40 @@
+---
+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.datePublished.toString()).format("MMMM DD, YYYY");
+const datePublished = post.data.datePublished.toISOString();
+---
+
+<style lang="scss">
+	@use "../scss/variables" as *;
+
+	a {
+		color: $colorText;
+	}
+
+	small {
+		font-size: $fontSizeBase * 0.75;
+		opacity: 0.5;
+	}
+</style>
+
+<li>
+	<article>
+		<a href={`/blog/${post.slug}`} lang={post.data.lang}>{post.data.title}</a>
+		<div>
+			<small>
+				<time datetime={datePublished} lang="en">{formattedDate}</time>
+				<span>•</span>
+				<span>{remarkPluginFrontmatter.minutesRead}</span>
+			</small>
+		</div>
+	</article>
+</li>