refactor: Move TrackCard to component

src/lib/components/TrackCard.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let title: string;
+  export let producerUsername: string;
+</script>
+
+<article>
+  <hgroup>
+    <h2>{title}</h2>
+    <h3>by {producerUsername}</h3>
+  </hgroup>
+
+  This is a track card.
+
+  <footer>
+    <label for="comment">
+      <input type="text" name="comment" placeholder="Leave some feedback" />
+    </label>
+  </footer>
+</article>

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import TrackCard from '$lib/components/TrackCard.svelte';
   export let data;
 </script>
 
@@ -14,14 +15,7 @@
   {/if}
 
   {#each data.tracks as track}
-    <article>
+    <TrackCard title={track.title} producerUsername={track.producer.username} />
-      <hgroup>
-        <h2>{track.title}</h2>
-        <h3>by {track.producer.username}</h3>
-      </hgroup>
-
-      This is a track
-    </article>
   {/each}
 {:else}
   Oh no.