UIを整えた

Author: KaichiManabe

web/app/search/page.tsx

@@ -14,9 +14,9 @@ export default function SearchPage(props: {
   const query = searchParams?.query || "";
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-100">
-      <div className="card w-96 bg-white p-6 shadow-md">
-        <h2 className="mb-4 font-bold text-2xl">Search</h2>
+    <div className="flex min-h-screen justify-center ">
+      <div className="w-full">
+        <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
         <Search placeholder="検索" />
         <Table query={query} />
       </div>

web/components/search/search.tsx

@@ -19,12 +19,12 @@ export default function Search({ placeholder }: { placeholder: string }) {
   }
 
   return (
-    <div className="relative flex flex-1 flex-shrink-0">
+    <div className="relative mr-5 ml-5 flex flex-1 flex-shrink-0">
       <label htmlFor="search" className="sr-only">
         Search
       </label>
       <input
-        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+        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"
         placeholder={placeholder}
         onChange={(e) => {
           handleSearch(e.target.value);

web/components/search/table.tsx

@@ -13,23 +13,16 @@ export default function UserTable({ query }: { query: string }) {
 
   const [users, setUsers] = useState<User[] | null>(null);
 
-  useEffect(() => {
-    if (data) {
-      setUsers(data);
-    }
-  }, [data]);
-
   useEffect(() => {
     function searchByUserName(query: string) {
       const filteredUsers = data?.filter((user) =>
         user.name.toLowerCase().includes(query.toLowerCase()),
       );
       setUsers(filteredUsers || null);
     }
-    if (query === "") {
+    if (!query) {
       setUsers(data);
-    }
-    if (query) {
+    } else {
       searchByUserName(query);
     }
   }, [query, data]);