Chat home center

package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/material": "^5.14.12",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest",
@@ -25,8 +25,11 @@
     "autoprefixer": "latest",
     "eslint": "latest",
     "eslint-config-next": "latest",
+    "eslint-plugin-tailwind": "^0.2.1",
     "eslint-plugin-tailwindcss": "^3.13.0",
     "postcss": "latest",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.5",
     "tailwindcss": "latest",
     "typescript": "latest"
   }

src/components/Chat.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-
+import SearchBar from "./SearchBar";
+import ChatBar from "./ChatBar";
 const Chat = () => {
   return (
-    <div className="hide-scrollbar h-screen w-full overflow-y-auto   bg-chat">
-      Chat
-      <div className="mt-40">aaa</div>
-      <div className="mt-40">aaa</div>
-      <div className="mt-40">aaa</div>
-      <div className="mt-40">aaa</div>
-      <div className="mt-40">aaa</div>
+    <div className="hidden-scrollbar h-screen w-full overflow-y-scroll">
+      <SearchBar/>
+      {/* ここにチャットを表示するコンポーネントを作成
+      最新のチャットを表示するようにスクロール */}
+        <div className="m-40">aaa</div>
+        <div className="m-40">aaa</div>
+        <div className="m-40">aaa</div>
+        <div className="m-40">aaa</div>
+      <ChatBar/>
     </div>
   );
 };

src/components/ChatBar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
+
+const ChatBar = () => {
+    return (
+        <div className="h-min bg-gray-200 px-2">
+      <div className="overflow-hidden rounded-lg">
+        <div className="flex">
+          <div className="w-full p-3">
+            <div className="relative">
+              <input
+                type="text"
+                className="h-14 w-full rounded-lg bg-white px-16 hover:cursor-pointer focus:outline-none"
+              ></input>
+                <SentimentSatisfiedAltIcon className="absolute right-1 top-3 h-3/5 w-1/5 text-gray-400"></SentimentSatisfiedAltIcon>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    );
+    }
+
+export default ChatBar;

src/components/SearchBar.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import SearchIcon from "@mui/icons-material/Search";
+
+const SearchBar = () => {
+  return (
+    // サイドバーとの幅,高さを揃えたい
+    <div className="h-min bg-gray-200 px-2">
+      <div className="overflow-hidden rounded-lg">
+        <div className="flex">
+          <div className="w-full p-3">
+            <div className="relative">
+              <SearchIcon className="absolute left-1 top-3 h-3/5 w-1/5 text-gray-400"></SearchIcon>
+              <input
+                type="text"
+                className="h-14 w-full rounded-lg bg-white px-16 hover:cursor-pointer focus:outline-none"
+              ></input>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  );
+};
+
+export default SearchBar;

src/pages/chatHomeCenter.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-export default function chatHomeCenter() {
-  return (
-    <div className="py-20 h-screen bg-gray-300 px-2">
-      <div className="max-w-md mx-auto rounded-lg overflow-hidden md:max-w-xl">
-        <div className="md:flex">
-          <div className="w-full p-3">
-            <div className="relative">
-              <i className="absolute fa fa-search text-gray-400 top-5 left-4"></i>
-              <input
-                type="text"
-                className="bg-white h-14 w-full px-12 rounded-lg focus:outline-none hover:cursor-pointer"
-                name=""
-              ></input>
-              <span className="absolute top-4 right-5 border-l pl-4">
-                <i className="fa fa-microphone text-gray-500 hover:text-green-500 hover:cursor-pointer"></i>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/index.tsx

@@ -8,7 +8,7 @@ const inter = Inter({ subsets: ["latin"] });
 export default function Home() {
   return (
     <div className="flex w-full  ">
-      <Chat />
+      <Chat/>
     </div>
   );
 }

src/styles/globals.css

@@ -9,10 +9,12 @@
 }
 
 /* スクロールバーを非表示にするスタイル */
-.hide-scrollbar::-webkit-scrollbar {
-  width: 0.5em;
-}
+  .hidden-scrollbar {
+    -ms-overflow-style: none; /* IE, Edge 対応 */
+    scrollbar-width: none; /* Firefox 対応 */
+  }
+  .hidden-scrollbar::-webkit-scrollbar {
+    /* Chrome, Safari 対応 */
+    display: none;
+  }
 
-.hide-scrollbar::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}