refactor: Move comment to separate component

src/lib/components/Comment.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  export let content: string;
+  export let author: string;
+  export let createdAt: Date;
+
+  // TODO:  Relative formatting (ie. 6 days ago, 3 moonths ago)
+  const formatDateTime = (datetime: Date) => {
+    /*
+       If the date is today, then return LocaleTimeString
+       If the date is /not/ today, then return LocaleDateString
+    */
+    if (new Date().toDateString() === datetime.toDateString()) {
+      return datetime.toLocaleTimeString();
+    }
+
+    return datetime.toLocaleDateString();
+  };
+</script>
+
+<div>
+  <div class="comment-headline">
+    <small>{author}</small>
+    <small class="comment-timestamp">
+      <abbr title={createdAt.toLocaleString()}>
+        {formatDateTime(createdAt)}
+      </abbr>
+    </small>
+  </div>
+  <p>{content}</p>
+</div>
+
+<style>
+  .comment-headline {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .comment-timestamp {
+    color: gray;
+  }
+</style>

src/lib/components/TrackCard.svelte

@@ -1,22 +1,11 @@
 <script lang="ts">
+  import Comment from '$lib/components/Comment.svelte';
+
   export let id: number;
   export let title: string;
   export let version: number;
   export let producerUsername: string;
   export let comments: { author: string; content: string; createdAt: Date }[];
-
-  // TODO:  Relative formatting (ie. 6 days ago, 3 moonths ago)
-  const formatDateTime = (datetime: Date) => {
-    /*
-       If the date is today, then return LocaleTimeString
-       If the date is /not/ today, then return LocaleDateString
-    */
-    if (new Date().toDateString() === datetime.toDateString()) {
-      return datetime.toLocaleTimeString();
-    }
-
-    return datetime.toLocaleDateString();
-  };
 </script>
 
 <article>
@@ -40,17 +29,7 @@
     {/if}
 
     {#each comments as comment}
-      <div>
+      <Comment content={comment.content} author={comment.author} createdAt={comment.createdAt} />
-        <div class="comment-headline">
-          <small>{comment.author}</small>
-          <small class="comment-timestamp">
-            <abbr title={comment.createdAt.toLocaleString()}>
-              {formatDateTime(comment.createdAt)}
-            </abbr>
-          </small>
-        </div>
-        <p>{comment.content}</p>
-      </div>
       <hr />
     {/each}
 
@@ -64,13 +43,4 @@
   .track-title {
     text-decoration: none;
   }
-
-  .comment-headline {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .comment-timestamp {
-    color: gray;
-  }
 </style>