Create created updated time component and refactor

Author: mcecode

src/components/created-updated-time.astro

@@ -0,0 +1,10 @@
+---
+import Time from "@components/time.astro";
+
+type Props = { created: Date; updated: Date; class?: string };
+const { created, updated, class: className } = Astro.props;
+---
+
+<p class={className}>
+  Created: <Time date={created} /> | Updated: <Time date={updated} />
+</p>

src/components/post-item.astro

@@ -1,5 +1,5 @@
 ---
-import Time from "@components/time.astro";
+import CreatedUpdatedTime from "./created-updated-time.astro";
 
 type Props = {
   title: string;
@@ -12,9 +12,11 @@ const { title, link, dateCreated, dateUpdated } = Astro.props;
 
 <li>
   <p><a href={link}>{title}</a></p>
-  <p class="small-text">
-    Created: <Time date={dateCreated} /> | Updated: <Time date={dateUpdated} />
-  </p>
+  <CreatedUpdatedTime
+    class="small-text"
+    created={dateCreated}
+    updated={dateUpdated}
+  />
 </li>
 
 <style lang="scss">

src/pages/notes/[slug].astro

@@ -3,7 +3,7 @@ import type { CollectionEntry } from "astro:content";
 
 import { getCollection } from "astro:content";
 
-import Time from "@components/time.astro";
+import CreatedUpdatedTime from "@components/created-updated-time.astro";
 import Article from "@layout/article.astro";
 import Page from "@layout/page.astro";
 
@@ -17,15 +17,17 @@ export async function getStaticPaths() {
 type Props = { note: CollectionEntry<"notes"> };
 const { note } = Astro.props;
 const { Content } = await note.render();
+const { title, dateCreated, dateUpdated } = note.data;
 ---
 
-<Page title={note.data.title}>
+<Page title={title}>
   <Article>
-    <h1 class="smaller-spacing">{note.data.title}</h1>
-    <p class="small-text larger-spacing">
-      Created: <Time date={note.data.dateCreated} /> | Updated:
-      <Time date={note.data.dateUpdated} />
-    </p>
+    <h1 class="smaller-spacing">{title}</h1>
+    <CreatedUpdatedTime
+      class="small-text larger-spacing"
+      created={dateCreated}
+      updated={dateUpdated}
+    />
     <Content />
   </Article>
 </Page>