ユーザー名検索

Author: RRRyoma

web/app/search/layout.tsx

@@ -0,0 +1,18 @@
+import BottomBar from "~/components/BottomBar";
+import Header from "~/components/Header";
+
+export default function HomePageLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header title="ホーム/Home" />
+      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
+        {children}
+      </div>
+      <BottomBar activeTab="4_search" />
+    </>
+  );
+}

web/app/search/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useRecommended } from "~/api/user";
+
+import { useModal } from "~/components/common/modal/ModalProvider";
+import { HumanListItem } from "~/components/human/humanListItem";
+
+const SearchPage: React.FC = () => {
+  const [searchWord, setSearchWord] = useState("");
+  const { data: recommended } = useRecommended();
+  const { openModal } = useModal();
+  const [users, setUsers] = useState<
+    | {
+        id: number;
+        guid: string;
+        name: string;
+        gender: string;
+        grade: string;
+        faculty: string;
+        department: string;
+        intro: string;
+        pictureUrl: string;
+      }[]
+    | null
+  >(null);
+
+  useEffect(() => {
+    if (recommended) {
+      setUsers(recommended);
+    }
+  }, [recommended]);
+
+  function searchByUserName() {
+    const filteredUsers = recommended?.filter((user) =>
+      user.name.toLowerCase().includes(searchWord.toLowerCase()),
+    );
+    setUsers(filteredUsers || null);
+  }
+
+  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="form-control mb-4">
+          <label htmlFor="searchInput" className="label">
+            <span className="label-text">Enter search term</span>
+          </label>
+          <input
+            type="text"
+            value={searchWord}
+            onChange={(e) => setSearchWord(e.target.value)}
+            placeholder="Type here"
+            className="input input-bordered w-full"
+          />
+        </div>
+
+        <button
+          type="button"
+          onClick={searchByUserName}
+          className="btn btn-primary w-full"
+        >
+          Search
+        </button>
+        {users?.map((user) => (
+          <HumanListItem
+            key={user.id}
+            id={user.id}
+            name={user.name}
+            pictureUrl={user.pictureUrl}
+            onOpen={() => openModal(user)}
+            hasDots
+          ></HumanListItem>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SearchPage;

web/components/BottomBar.tsx

@@ -1,12 +1,13 @@
 import ChatIcon from "@mui/icons-material/Chat";
 import HomeIcon from "@mui/icons-material/Home";
 import PeopleIcon from "@mui/icons-material/People";
+import SearchIcon from "@mui/icons-material/Search";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { BottomNavigation, BottomNavigationAction, Box } from "@mui/material";
 import Link from "next/link";
 
 type Props = {
-  activeTab: "0_home" | "1_friends" | "2_chat" | "3_settings";
+  activeTab: "0_home" | "1_friends" | "2_chat" | "3_settings" | "4_search";
 };
 
 export default function BottomBar(props: Props) {
@@ -58,7 +59,7 @@ export default function BottomBar(props: Props) {
             <ChatIcon
               sx={{
                 color:
-                  activeTab === "2_chat" ? "primary.main" : "secondary.main",
+                  activeTab === "2_chat" ? "#primary.main" : "secondary.main",
               }}
             />
           }
@@ -78,6 +79,19 @@ export default function BottomBar(props: Props) {
             />
           }
         />
+        <BottomNavigationAction
+          component={Link}
+          href="/search"
+          label="Search"
+          icon={
+            <SearchIcon
+              sx={{
+                color:
+                  activeTab === "4_search" ? "primary.main" : "secondary.main",
+              }}
+            />
+          }
+        />
       </BottomNavigation>
     </Box>
   );