From 3576b37a11723461d57b8ca1a034a9d63f1b3c6a Mon Sep 17 00:00:00 2001
From: Roman Godmaire <godmaire@twilit.io>
Date: Sun, 19 Nov 2023 17:24:06 -0500
Subject: [PATCH] refactor: Move TrackCard to component

---
 src/lib/components/TrackCard.svelte | 19 +++++++++++++++++++
 src/routes/+page.svelte             | 10 ++--------
 2 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/components/TrackCard.svelte

diff --git a/src/lib/components/TrackCard.svelte b/src/lib/components/TrackCard.svelte
new file mode 100644
index 0000000..afe6b8a
--- /dev/null
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9438754..4caf3a3 100644
--- a/src/routes/+page.svelte
+++ b/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>
-      <hgroup>
-        <h2>{track.title}</h2>
-        <h3>by {track.producer.username}</h3>
-      </hgroup>
-
-      This is a track
-    </article>
+    <TrackCard title={track.title} producerUsername={track.producer.username} />
   {/each}
 {:else}
   Oh no.