From 465835bdb2ade1b0937e55cc80de17f5a75e8329 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 10 Jul 2023 15:52:47 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20Add=20option=20to=20clear?=
 =?UTF-8?q?=20the=20search.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search.svelte             | 13 +++++++++++++
 src/routes/+page.svelte                  |  6 ++++++
 src/routes/directory/[slug]/+page.svelte |  6 ++++++
 3 files changed, 25 insertions(+)

diff --git a/src/components/search.svelte b/src/components/search.svelte
index 5294003..7a1bfca 100644
--- a/src/components/search.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c569ebe..02d9962 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/directory/[slug]/+page.svelte b/src/routes/directory/[slug]/+page.svelte
index 3bfe906..475bb32 100644
--- a/src/routes/directory/[slug]/+page.svelte
+++ b/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>