From 636d706ad5bcb9e739cbc70c9f675f735f90ed18 Mon Sep 17 00:00:00 2001
From: Roman Godmaire <godmaire@twilit.io>
Date: Sat, 25 Nov 2023 18:25:12 -0500
Subject: [PATCH] style: show post button if input not empty

---
 src/lib/components/CommentField.svelte | 29 ++++++++++++++++++++++++++
 src/lib/components/TrackCard.svelte    |  5 ++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/CommentField.svelte

diff --git a/src/lib/components/CommentField.svelte b/src/lib/components/CommentField.svelte
new file mode 100644
index 0000000..3ec700a
--- /dev/null
+++ b/src/lib/components/CommentField.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  let content = '';
+</script>
+
+<div class="comment-field">
+  <label for="comment" class="comment-input">
+    <input type="text" name="comment" placeholder="Leave some feedback" bind:value={content} />
+  </label>
+
+  {#if content.length > 0}
+    <button class="post-button">Post</button>
+  {/if}
+</div>
+
+<style>
+  .comment-field {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+  }
+
+  .comment-input {
+    flex-grow: 1;
+  }
+
+  .post-button {
+    width: 6em;
+  }
+</style>
diff --git a/src/lib/components/TrackCard.svelte b/src/lib/components/TrackCard.svelte
index 3ff9616..912ecc5 100644
--- a/src/lib/components/TrackCard.svelte
+++ b/src/lib/components/TrackCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Comment from '$lib/components/Comment.svelte';
+  import CommentField from '$lib/components/CommentField.svelte';
 
   export let id: number;
   export let title: string;
@@ -33,9 +34,7 @@
       <hr />
     {/each}
 
-    <label for="comment">
-      <input type="text" name="comment" placeholder="Leave some feedback" />
-    </label>
+    <CommentField />
   </footer>
 </article>