⚙️ 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>

src/routes/+page.svelte

@@ -28,6 +28,11 @@
       return svgTitle.includes(searchTerm.toLowerCase());
     }));
   };
+
+  const clearSearch = () => {
+    searchTerm = '';
+    searchSvgs();
+  };
 </script>
 
 <svelte:head>
@@ -38,6 +43,7 @@
   <Search
     bind:searchTerm
     on:input={searchSvgs}
+    clearSearch={() => clearSearch()}
     placeholder={`Search ${filteredSvgs.length} logos...`}
   />
   <Grid>

src/routes/directory/[slug]/+page.svelte

@@ -29,6 +29,11 @@
       return svgTitle.includes(searchTerm.toLowerCase());
     }));
   };
+
+  const clearSearch = () => {
+    searchTerm = '';
+    searchSvgs();
+  };
 </script>
 
 <svelte:head>
@@ -39,6 +44,7 @@
   <Search
     bind:searchTerm
     on:input={searchSvgs}
+    clearSearch={() => clearSearch()}
     placeholder={`Search ${filteredSvgs.length} ${category} logos...`}
   />
   <Grid>