Rewrite

src/components/Datetime.astro

@@ -0,0 +1,28 @@
+---
+import { LOCALE } from "@config";
+import { Icon } from "astro-icon/components";
+export interface Props {
+  modDatetime?: string | null | Date;
+  pubDatetime: string | Date;
+  className?: string;
+}
+
+const { modDatetime, pubDatetime, className = "" } = Astro.props;
+
+function formatToMonthDayYear(timeString: string | Date) {
+  const date = new Date(timeString);
+  return date.toLocaleDateString(LOCALE.langTag, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}
+
+---
+
+<div class={ className }>
+  <Icon name="fa6-solid:calendar-days" title="Published" class="mr-1" /> <span>{ formatToMonthDayYear(pubDatetime) }</span>
+  { modDatetime && modDatetime > pubDatetime && (
+    <Icon name="fa6-solid:pencil" title="Modified" class="ml-2 mr-1" /> <span>{ formatToMonthDayYear(modDatetime) } </span>
+  ) }
+</div>