ユーザ検索のデザインを修正

Author: nakaterm

web/app/search/page.tsx

@@ -55,10 +55,9 @@ export default function SearchPage({
   );
 
   return (
-    <div className="flex justify-center">
-      <div className="w-full">
-        <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
-        <Search placeholder="検索" setSearchString={setQuery} />
+    <div className="flex h-full flex-col justify-center gap-2 p-4">
+      <Search placeholder="検索" setSearchString={setQuery} />
+      <div className="flex-1">
         {query !== "" ? (
           users.length > 0 ? (
             <Table users={users} canRequest={canRequest} />

web/components/search/search.tsx

@@ -21,19 +21,17 @@ export default function Search({ placeholder, setSearchString }: Props) {
   }
 
   return (
-    <div className="relative mr-5 ml-5 flex flex-1 flex-shrink-0">
-      <label htmlFor="search" className="sr-only">
-        Search
-      </label>
+    <label className="input input-bordered flex items-center gap-2">
+      <MdOutlineSearch className="text-gray-500" />
       <input
-        className=" block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-none placeholder:text-gray-500 focus:border-primary focus:ring-1 focus:ring-primary"
+        type="text"
+        className="grow"
         placeholder={placeholder}
         onChange={(e) => {
           handleSearch(e.target.value);
         }}
         defaultValue={searchParams.get("query")?.toString()}
       />
-      <MdOutlineSearch className="-translate-y-1/2 absolute top-1/2 left-3 h-[18px] w-[18px] text-gray-500 peer-focus:text-gray-900" />
-    </div>
+    </label>
   );
 }