From 2b57fee18284d458fd93024d5e9becb3349f8828 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 12 Dec 2023 13:12:07 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20New=20search=20bar.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search.svelte | 49 ++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/search.svelte b/src/components/search.svelte
index 12d0ca0..c7cc060 100644
--- a/src/components/search.svelte
+++ b/src/components/search.svelte
@@ -3,33 +3,34 @@
   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">
-  <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
-    <div class="pointer-events-none">
-      <SearchIcon size={18} strokeWidth={searchTerm ? 2.5 : 1.5} />
+<div class="sticky top-[63px] z-50">
+  <div class="relative w-full text-lg">
+    <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
+      <div class="pointer-events-none">
+        <SearchIcon size={20} strokeWidth={searchTerm ? 2.5 : 1.5} />
+      </div>
     </div>
+    <input
+      type="text"
+      {placeholder}
+      autocomplete="off"
+      class="w-full border-b border-neutral-300 bg-neutral-100 p-3 pl-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700"
+      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>
-  <input
-    type="text"
-    {placeholder}
-    autocomplete="off"
-    class="w-full rounded-md border border-neutral-300 bg-neutral-200/50 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-700/10 dark:focus:ring-neutral-700"
-    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>