ユーザ検索で 1 文字以上入力したら表示

Author: nakaterm

web/app/home/components/NoMoreUser.tsx

@@ -15,7 +15,7 @@ import { useAboutMe, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
-import NoMoreUser from "./components/NoMoreUser";
+import BackgroundText from "../../components/common/BackgroundText";
 import PersonDetailedMenu from "./components/PersonDetailedMenu";
 import RoundButton from "./components/RoundButton";
 
@@ -121,7 +121,7 @@ export default function Home() {
     return <FullScreenCircularProgress />;
   }
   if (recommended.size() === 0 && loading === false) {
-    return <NoMoreUser />;
+    return <BackgroundText text="「いいね！」を送るユーザーがいません。" />;
   }
   if (error) throw error;
 

web/app/home/page.tsx

@@ -6,6 +6,7 @@ import { useAll, useMatched, useMyID, usePendingFromMe } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import Search from "~/components/search/search";
 import Table from "~/components/search/table";
+import BackgroundText from "../../components/common/BackgroundText";
 
 export default function SearchPage({
   searchParams,
@@ -58,10 +59,14 @@ export default function SearchPage({
       <div className="w-full">
         <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
         <Search placeholder="検索" setSearchString={setQuery} />
-        {users ? (
-          <Table users={users} canRequest={canRequest} />
+        {query !== "" ? (
+          users.length > 0 ? (
+            <Table users={users} canRequest={canRequest} />
+          ) : (
+            <BackgroundText text="ユーザが見つかりません" />
+          )
         ) : (
-          <span>ユーザーが見つかりません</span>
+          <BackgroundText text="ユーザ名・授業名・タグ名で検索してみましょう" />
         )}
       </div>
     </div>

web/app/search/page.tsx

@@ -0,0 +1,7 @@
+export default function BackgroundText({ text }: { text: string }) {
+  return (
+    <div className="flex h-full items-center justify-center px-4 text-center">
+      <p className="text-2xl text-gray-500">{text}</p>
+    </div>
+  );
+}