frontend design done

Author: harikrishnan-git

frontend/src/Components/Sidebar/Logout.jsx

@@ -5,7 +5,7 @@ export default function Logout() {
   return (
     <div className="mt-auto ">
       <button>
-        <BiLogOut className="h-6 w-6 text-white cursor-pointer" />
+        <BiLogOut className="h-7 w-7 text-white cursor-pointer" />
       </button>
     </div>
   );

frontend/src/Components/Sidebar.jsx frontend/src/Components/Sidebar/Sidebar.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import SearchInput from "./Sidebar/SearchInput";
-import Conversations from "./Sidebar/Conversations";
-import Logout from "./Sidebar/Logout";
+import SearchInput from "./SearchInput";
+import Conversations from "./Conversations";
+import Logout from "./Logout";
 
 export default function Sidebar() {
   return (

frontend/src/Components/messages/Message.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default function message() {
+  return (
+    <div className="chat chat-start">
+      <div className="chat-image avatar">
+        <div className="w-10 rounded-full">
+          <img
+            alt="Tailwind CSS chat bubble component"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
+          />
+        </div>
+      </div>
+      <div className="chat-header">
+        Obi-Wan Kenobi
+        <time className="text-xs opacity-50">12:45</time>
+      </div>
+      <div className="chat-bubble">You were the Chosen One!</div>
+      <div className="chat-footer opacity-50">Delivered</div>
+    </div>
+  );
+}

frontend/src/Components/messages/MessageContainer.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import MessageHeader from "./MessageHeader";
+import Messages from "./Messages";
+import MessageInput from "./MessageInput";
+import { IoIosSend, IoMdChatbubbles } from "react-icons/io";
+
+export default function MessageContainer() {
+  let NoChat = true;
+  return (
+    <div className="md:min-w-[450px] flex flex-col m:h-[450px] md:h-[600px]">
+      {NoChat ? (
+        <EmptyContiner />
+      ) : (
+        <>
+          <MessageHeader />
+          <Messages />
+          <MessageInput />
+        </>
+      )}
+    </div>
+  );
+}
+
+const EmptyContiner = () => {
+  return (
+    <div className="flex items-center justify-center w-full h-full">
+      <div className="px-4 text-center sm:text-lg md:text-xl text-gray-200 font-semibold flex flex-col items-center gap-2">
+        <p>Welcome 👋 John Doe ❄</p>
+        <p>Select a chat to start messaging</p>
+        <IoIosSend className="text-3xl md:text-6xl text-center" />
+      </div>
+    </div>
+  );
+};

frontend/src/Components/messages/MessageHeader.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function MessageHeader() {
+  return (
+    <div className="bg-slate-500 px-4 py-2 mb-2">
+      <span className="label-text">To:</span>
+      <span className="text-gray-900 font-bold">John Doe</span>
+    </div>
+  );
+}

frontend/src/Components/messages/MessageInput.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { IoIosSend } from "react-icons/io";
+
+export default function MessageInput() {
+  return (
+    <div className="">
+      <form action="" method="post" className="flex m-1">
+        <input
+          type="text"
+          placeholder="Enter your message"
+          className="input input-bordered input-primary flex-1"
+        />
+        <button className="btn btn-primary rounded px-2 ml-1">
+          <IoIosSend className="h-8 w-8" />
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/Components/messages/Messages.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Message from "./Message";
+
+export default function Messages() {
+  return (
+    <div className="flex flex-col flex-1 overflow-auto">
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+      <Message></Message>
+    </div>
+  );
+}

frontend/src/Pages/Home/Home.jsx

@@ -1,10 +1,12 @@
 import React from "react";
-import Sidebar from "../../Components/Sidebar";
+import Sidebar from "../../Components/Sidebar/Sidebar";
+import MessageContainer from "../../Components/messages/MessageContainer";
 
 export default function Home() {
   return (
-    <div className="shadow-md rounded-lg bg-gray-400 bg-clip-padding backdrop-blur-xl bg-opacity-0 sm:h-[450px] md:h-[600px]">
+    <div className="flex shadow-md rounded-lg bg-gray-400 bg-clip-padding backdrop-blur-xl bg-opacity-0 sm:h-[450px] md:h-[600px] ">
       <Sidebar />
+      <MessageContainer />
     </div>
   );
 }

frontend/src/index.css

@@ -9,3 +9,26 @@ body {
   background-size: cover;
   background-position: center;
 }
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #555;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #121212;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #242424;
+}
+
+* {
+  scrollbar-width: 8px;
+  scrollbar-color: #1f1e1e #a09e9e5b;
+}