add: chatbox and chatlist components

frontend/src/components/ChatBox.jsx

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+
+const ChatBox = ({ activeChat }) => {
+  if (!activeChat) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-gray-50">
+        <p className="text-gray-500">Select a chat to start messaging</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col bg-gray-50">
+      {/* Chat Header */}
+      <div className="p-4 border-b bg-white">
+        <h2 className="text-lg font-bold">{activeChat.name}</h2>
+      </div>
+
+      {/* Chat Messages */}
+      <div className="flex-1 p-4 overflow-y-auto">
+        <div className="bg-blue-100 p-2 mb-2 rounded-md w-fit max-w-xs">
+          {activeChat.message}
+        </div>
+        {/* Add more messages as needed */}
+      </div>
+
+      {/* Message Input */}
+      <div className="p-4 bg-white border-t">
+        <input
+          type="text"
+          placeholder="Type a message..."
+          className="w-full border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+    </div>
+  );
+};
+
+ChatBox.propTypes = {
+  activeChat: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+  }),
+};
+
+export default ChatBox;

frontend/src/components/ChatList.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+const ChatList = ({ contacts, onSelectChat }) => {
+  return (
+    <div className="w-1/3 bg-white border-r overflow-y-auto">
+      <h2 className="text-lg font-bold p-4 border-b">Chats</h2>
+      <ul>
+        {contacts.map((contact) => (
+          <li
+            key={contact.id}
+            onClick={() => onSelectChat(contact)}
+            className="p-4 border-b hover:bg-gray-200 cursor-pointer"
+          >
+            <p className="font-semibold">{contact.name}</p>
+            <p className="text-sm text-gray-500 truncate">{contact.message}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+ChatList.propTypes = {
+  contacts: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      message: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  onSelectChat: PropTypes.func.isRequired,
+};
+
+export default ChatList;

frontend/src/components/Navbar.jsx

@@ -148,7 +148,7 @@ function Navbar() {
               </>
             )}
             <NotificationBell />
-            <a href="/inbox" className="text-white hover:text-purple-200 transition duration-300 font-medium">
+            <a href="/message" className="text-white hover:text-purple-200 transition duration-300 font-medium">
               <InboxIcon className="h-6 w-6" />
             </a>
 
@@ -200,7 +200,7 @@ function Navbar() {
                 </>
               )}
               <NotificationBell />
-              <a href="/inbox" className="text-white hover:text-purple-200 transition duration-300 font-medium">
+              <a href="/message" className="text-white hover:text-purple-200 transition duration-300 font-medium">
                 <InboxIcon className="h-6 w-6" />
               </a>
 

frontend/src/message.jsx

@@ -1,7 +1,29 @@
+import { useState } from 'react';
+import ChatList from './components/ChatList';
+import ChatBox from './components/ChatBox';
+
 const Message = () => {
+  const [activeChat, setActiveChat] = useState(null);
+
+  const contacts = [
+    { id: 1, name: 'John Doe', message: 'Hey! How are you?' },
+    { id: 2, name: 'Jane Smith', message: 'Let’s catch up soon!' },
+    { id: 3, name: 'Mark Taylor', message: 'Check this out.' },
+  ];
+
+  const handleChatSelect = (contact) => {
+    setActiveChat(contact);
+  };
+
   return (
-    <div>Message</div>
-  )
-}
+    <div className="flex h-screen bg-gray-100">
+      {/* Chat List */}
+      <ChatList contacts={contacts} onSelectChat={handleChatSelect} />
+
+      {/* Chat Box */}
+      <ChatBox activeChat={activeChat} />
+    </div>
+  );
+};
 
 export default Message;