page.tsxをbottomBar.tsxの内容にしてしまったため修復

Author: RRRyoma

web/app/chat/page.tsx

@@ -8,6 +8,14 @@ import RoomList from "~/components/chat/RoomList";
 import { RoomWindow } from "~/components/chat/RoomWindow";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 
+export default function Chat() {
+  return (
+    <Suspense fallback={<FullScreenCircularProgress />}>
+      <ChatListContent />
+    </Suspense>
+  );
+}
+
 function ChatListContent() {
   const searchParams = useSearchParams();
 
@@ -28,11 +36,3 @@ function ChatListContent() {
     <RoomList roomsData={state.data} />
   );
 }
-
-export default function Chat() {
-  return (
-    <Suspense fallback={<FullScreenCircularProgress />}>
-      <ChatListContent />
-    </Suspense>
-  );
-}

web/app/search/layout.tsx

@@ -8,7 +8,7 @@ export default function HomePageLayout({
 }) {
   return (
     <>
-      <Header title="ホーム/Home" />
+      <Header title="検索/Search" />
       <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>

web/app/search/page.tsx

@@ -1,73 +1,82 @@
-import Link from "next/link";
-import { MdHome } from "react-icons/md";
-import { MdPeople } from "react-icons/md";
-import { MdChat } from "react-icons/md";
-import { MdSettings } from "react-icons/md";
+"use client";
 
-type Props = {
-  activeTab: "0_home" | "1_friends" | "2_chat" | "3_settings" | "4_search";
-};
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useRecommended } from "~/api/user";
 
-function BottomBarCell({
-  label,
-  href,
-  iconComponent,
-  isActive,
-}: {
-  label: string;
-  href: string;
-  iconComponent: React.ReactNode;
-  isActive: boolean;
-}) {
-  return (
-    <Link
-      href={href}
-      className={`focus:bg-gray-300 ${isActive ? "active text-primary" : "text-secondary"}`}
-    >
-      {iconComponent}
-      <span
-        className={`text-xs ${isActive ? "text-primary" : "text-gray-500"}`}
-      >
-        {label}
-      </span>
-    </Link>
-  );
-}
+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);
+  }
 
-export default function BottomBar(props: Props) {
-  const { activeTab } = props;
   return (
-    <div className="btm-nav flex max-h-14 w-full flex-row">
-      <BottomBarCell
-        label="Home"
-        href="/home"
-        isActive={activeTab === "0_home"}
-        iconComponent={<MdHome className="text-2xl" />}
-      />
-      <BottomBarCell
-        label="Friends"
-        href="/friends"
-        isActive={activeTab === "1_friends"}
-        iconComponent={<MdPeople className="text-2xl" />}
-      />
-      <BottomBarCell
-        label="Chat"
-        href="/chat"
-        isActive={activeTab === "2_chat"}
-        iconComponent={<MdChat className="text-2xl" />}
-      />
-      <BottomBarCell
-        label="Settings"
-        href="/settings"
-        isActive={activeTab === "3_settings"}
-        iconComponent={<MdSettings className="text-2xl" />}
-      />
-      <BottomBarCell
-        label="Search"
-        href="/search"
-        isActive={activeTab === "4_search"}
-        iconComponent={<MdSettings className="text-2xl" />}
-      />
+    <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
+          />
+        ))}
+      </div>
     </div>
   );
-}
+};
+
+export default SearchPage;

web/components/BottomBar.tsx

@@ -1,98 +1,73 @@
-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";
+import { MdHome } from "react-icons/md";
+import { MdPeople } from "react-icons/md";
+import { MdChat } from "react-icons/md";
+import { MdSettings } from "react-icons/md";
 
 type Props = {
   activeTab: "0_home" | "1_friends" | "2_chat" | "3_settings" | "4_search";
 };
 
+function BottomBarCell({
+  label,
+  href,
+  iconComponent,
+  isActive,
+}: {
+  label: string;
+  href: string;
+  iconComponent: React.ReactNode;
+  isActive: boolean;
+}) {
+  return (
+    <Link
+      href={href}
+      className={`focus:bg-gray-300 ${isActive ? "active text-primary" : "text-secondary"}`}
+    >
+      {iconComponent}
+      <span
+        className={`text-xs ${isActive ? "text-primary" : "text-gray-500"}`}
+      >
+        {label}
+      </span>
+    </Link>
+  );
+}
+
 export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
-    <Box sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}>
-      {/* TODO: 単に Viewer として BottomNavigation を使用しているので Box 等で置き換える */}
-      <BottomNavigation
-        showLabels
-        value={activeTab}
-        sx={{
-          width: "100%",
-          bottom: 0,
-          borderTop: "1px solid",
-          borderColor: "primary.main",
-        }}
-      >
-        <BottomNavigationAction
-          component={Link}
-          href="/home"
-          label="Home"
-          icon={
-            <HomeIcon
-              sx={{
-                color:
-                  activeTab === "0_home" ? "primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/friends"
-          label="Friends"
-          icon={
-            <PeopleIcon
-              sx={{
-                color:
-                  activeTab === "1_friends" ? "primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/chat"
-          label="Chat"
-          icon={
-            <ChatIcon
-              sx={{
-                color:
-                  activeTab === "2_chat" ? "#primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/settings"
-          label="Settings"
-          icon={
-            <SettingsIcon
-              sx={{
-                color:
-                  activeTab === "3_settings"
-                    ? "primary.main"
-                    : "secondary.main",
-              }}
-            />
-          }
-        />
-        <BottomNavigationAction
-          component={Link}
-          href="/search"
-          label="Search"
-          icon={
-            <SearchIcon
-              sx={{
-                color:
-                  activeTab === "4_search" ? "primary.main" : "secondary.main",
-              }}
-            />
-          }
-        />
-      </BottomNavigation>
-    </Box>
+    <div className="btm-nav flex max-h-14 w-full flex-row">
+      <BottomBarCell
+        label="Home"
+        href="/home"
+        isActive={activeTab === "0_home"}
+        iconComponent={<MdHome className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Friends"
+        href="/friends"
+        isActive={activeTab === "1_friends"}
+        iconComponent={<MdPeople className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Chat"
+        href="/chat"
+        isActive={activeTab === "2_chat"}
+        iconComponent={<MdChat className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Settings"
+        href="/settings"
+        isActive={activeTab === "3_settings"}
+        iconComponent={<MdSettings className="text-2xl" />}
+      />
+      <BottomBarCell
+        label="Search"
+        href="/search"
+        isActive={activeTab === "4_search"}
+        iconComponent={<MdSettings className="text-2xl" />}
+      />
+    </div>
   );
 }