chore: move v2 search

src/app/explorer/components/Search.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Input } from "@/components/ui/Input";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
 import { useDebouncedValue } from "foxact/use-debounced-value";
 import { useSetAtom } from "jotai";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -19,7 +20,7 @@ export const Search = () => {
 
   useEffect(() => {
     setSearch(debouncedValue);
-  }, [debouncedValue]);
+  }, [debouncedValue, setSearch]);
 
   useEffect(() => {
     const newSearchParams = new URLSearchParams(
@@ -30,14 +31,20 @@ export const Search = () => {
       "",
       `${pathname}?${newSearchParams.toString()}`,
     );
-  }, [value]);
+  }, [value, pathname]);
 
   return (
-    <Input
-      placeholder="Search guild.xyz"
-      size="lg"
-      value={value}
-      onChange={(e) => setValue(e.currentTarget.value)}
-    />
+    <div className="relative flex flex-col gap-3 sm:flex-row sm:gap-0">
+      <Input
+        className="relative h-12 grow rounded-xl border pr-6 pl-10 text-md"
+        size="lg"
+        placeholder="Search verified guilds"
+        onChange={({ currentTarget }) => setValue(currentTarget.value)}
+        value={value}
+      />
+      <div className="absolute left-4 flex h-12 items-center justify-center">
+        <MagnifyingGlass className="text-foreground-secondary" />
+      </div>
+    </div>
   );
 };