daisyUIとのコンフリクト解消

Author: RRRyoma

web/app/search/page.tsx

@@ -1,82 +1,73 @@
-"use client";
+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";
 
-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);
-  }
+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 (
-    <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>
+    <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>
+  );
+}
 
-        <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>
+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>
   );
-};
-
-export default SearchPage;
+}