⚙️ Add option to clear the search.

src/components/search.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   export let searchTerm: string;
   export let placeholder: string = 'Search...';
+  export let clearSearch: () => void;
   import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
+  import X from 'phosphor-svelte/lib/X';
 </script>
 
 <div class="relative w-full">
@@ -18,4 +20,15 @@
     bind:value={searchTerm}
     on:input
   />
+  {#if searchTerm.length > 0}
+    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <button
+        type="button"
+        class="focus:outline-none focus:ring-1 focus:ring-neutral-300"
+        on:click={clearSearch}
+      >
+        <X size={18} />
+      </button>
+    </div>
+  {/if}
 </div>