refactor poly element, use FormattedDate comp

src/components/blog/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
-import { getFormattedDate } from "@/utils";
 import type { CollectionEntry } from "astro:content";
+import FormattedDate from "../FormattedDate.astro";
 
 interface Props {
 	content: CollectionEntry<"post">;
@@ -10,15 +10,6 @@ interface Props {
 const {
 	content: { data },
 } = Astro.props;
-
-const datetime = data.publishDate.toISOString();
-const postDate = getFormattedDate(data.publishDate, { month: "long" });
-
-const hasBeenUpdated = typeof data.updatedDate !== "undefined";
-const updatedDatetime = data.updatedDate?.toISOString();
-const updatedPostDate = hasBeenUpdated
-	? getFormattedDate(data.updatedDate as Date, { month: "long" })
-	: null;
 ---
 
 {
@@ -35,14 +26,12 @@ const updatedPostDate = hasBeenUpdated
 	)
 }
 <h1 class="title mb-3 sm:mb-1">{data.title}</h1>
-<time datetime={datetime}>{postDate}</time>
+<FormattedDate date={data.publishDate} />
 {
-	hasBeenUpdated && (
+	data.updatedDate && (
 		<span class="ms-2 rounded-lg bg-[rgb(43_188_137_/_0.1)] p-1 text-accent">
 			Last Updated:
-			<time class="ms-1" datetime={updatedDatetime}>
-				{updatedPostDate}
-			</time>
+			<FormattedDate className="ms-1" date={data.updatedDate} />
 		</span>
 	)
 }

src/components/blog/PostPreview.astro

@@ -1,23 +1,21 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import type { IElement } from "@/data/shared";
-import { getFormattedDate } from "@/utils";
+import type { HTMLTag, Polymorphic } from "astro/types";
+import FormattedDate from "../FormattedDate.astro";
 
-interface Props extends IElement {
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	post: CollectionEntry<"post">;
 	withDesc?: boolean;
-}
+};
 
-const { post, as: Element = "div", withDesc = false } = Astro.props;
-const date = new Date(post.data.publishDate);
-const datetime = date.toISOString();
-const postDate = getFormattedDate(date);
+const { post, as: Tag = "div", withDesc = false } = Astro.props;
+const postDate = post.data.updatedDate ?? post.data.publishDate;
 ---
 
-<time datetime={datetime} class="min-w-[120px] text-gray-500">{postDate}</time>
-<Element>
+<FormattedDate date={postDate} className="min-w-[120px] text-gray-500" />
+<Tag>
 	<a href={`/posts/${post.slug}/`} class="cactus-link" rel="prefetch">
 		{post.data.title}
 	</a>
-</Element>
+</Tag>
 {withDesc && <q class="line-clamp-3 block italic">{post.data.description}</q>}

src/data/shared.ts

@@ -1,11 +1,7 @@
-interface IElement {
-	readonly as?: keyof HTMLElementTagNameMap;
-}
-
 interface PaginationLink {
 	url: string;
 	text?: string;
 	srLabel?: string;
 }
 
-export type { IElement, PaginationLink };
+export type { PaginationLink };