From be9943812303a7baba0d29768c9b3948a788243a Mon Sep 17 00:00:00 2001
From: Sergio <77530549+sergi0g@users.noreply.github.com>
Date: Fri, 21 Mar 2025 18:17:05 +0200
Subject: [PATCH] refactor: search component

---
 web/src/App.tsx               |  5 +++-
 web/src/components/Search.tsx | 46 +++++++++++++++++------------------
 web/tailwind.config.js        | 12 ++-------
 3 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index fa67e25..34e563f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -24,6 +24,7 @@ const SORT_ORDER = [
 function App() {
   const [data, setData] = useState<Data | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
+
   if (!data) return <Loading onLoad={setData} />;
   return (
     <div
@@ -63,7 +64,9 @@ function App() {
               <LastChecked datetime={data.last_updated} />
               <RefreshButton />
             </div>
-            <Search onChange={setSearchQuery} />
+            <div className="flex gap-2 px-6 text-black dark:text-white">
+              <Search onChange={setSearchQuery} />
+            </div>
             <ul>
               {Object.entries(
                 data.images.reduce<Record<string, typeof data.images>>(
diff --git a/web/src/components/Search.tsx b/web/src/components/Search.tsx
index 5fadd78..c7bf5e2 100644
--- a/web/src/components/Search.tsx
+++ b/web/src/components/Search.tsx
@@ -23,32 +23,30 @@ export default function Search({
     onChange("");
   };
   return (
-    <div className={`w-full px-6 text-black dark:text-white`}>
-      <div
-        className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`}
-      >
-        <SearchIcon
-          className={`size-5 text-${theme}-600 dark:text-${theme}-400`}
-        />
-        <div className="w-full">
-          <input
-            className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}
-            placeholder="Search"
-            onChange={handleChange}
-            value={searchQuery}
-          ></input>
-        </div>
-        {showClear && (
-          <button
-            onClick={handleClear}
-            className={`hover:text-${theme}-600 dark:hover:text-${theme}-400 transition-colors duration-200`}
-          >
-            <X className="size-5" />
-          </button>
-        )}
+    <div
+      className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 group relative flex-nowrap`}
+    >
+      <SearchIcon
+        className={`size-5 text-${theme}-600 dark:text-${theme}-400`}
+      />
+      <div className="w-full">
+        <input
+          className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}
+          placeholder="Search"
+          onChange={handleChange}
+          value={searchQuery}
+        ></input>
       </div>
+      {showClear && (
+        <button
+          onClick={handleClear}
+          className={`hover:text-${theme}-600 dark:hover:text-${theme}-400 transition-colors duration-200`}
+        >
+          <X className="size-5" />
+        </button>
+      )}
       <div
-        className="relative left-1/2 h-[8px] w-0 -translate-x-1/2 -translate-y-[8px] rounded-md border-b-2 border-b-blue-600 transition-all duration-200 peer-has-[:focus]:w-full"
+        className="absolute -bottom-px left-1/2 h-full w-0 -translate-x-1/2 rounded-md border-b-2 border-b-blue-600 transition-all duration-200 group-has-[:focus]:w-[calc(100%+2px)]"
         style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
       ></div>
     </div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 4474f32..dc3afbe 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -32,19 +32,11 @@ export default {
     },
     {
       pattern: /text-(gray|neutral)-600/,
-      variants: ["dark", "hover"],
+      variants: ["*", "dark", "hover", "placeholder"],
     },
     {
       pattern: /text-(gray|neutral)-400/,
-      variants: ["dark", "dark:hover"],
-    },
-    {
-      pattern: /text-(gray|neutral)-600/,
-      variants: ["placeholder"],
-    },
-    {
-      pattern: /text-(gray|neutral)-400/,
-      variants: ["placeholder:dark"],
+      variants: ["*:dark", "dark", "dark:hover", "placeholder:dark"],
     },
     {
       pattern: /text-(gray|neutral)-700/,