From 71374c41f0593b3e4b5a6b5f35b8aaf0f912b372 Mon Sep 17 00:00:00 2001
From: Sawit Koseeyaumporn <folk.sawit@gmail.com>
Date: Tue, 26 Nov 2024 00:01:32 +0700
Subject: [PATCH] add: chatbox and chatlist components

---
 frontend/src/components/ChatBox.jsx  | 47 ++++++++++++++++++++++++++++
 frontend/src/components/ChatList.jsx | 34 ++++++++++++++++++++
 frontend/src/components/Navbar.jsx   |  4 +--
 frontend/src/message.jsx             | 28 +++++++++++++++--
 4 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/ChatBox.jsx
 create mode 100644 frontend/src/components/ChatList.jsx

diff --git a/frontend/src/components/ChatBox.jsx b/frontend/src/components/ChatBox.jsx
new file mode 100644
index 0000000..5ef4252
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/ChatList.jsx b/frontend/src/components/ChatList.jsx
new file mode 100644
index 0000000..41e063d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 5fdb970..9067a6b 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/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>
 
diff --git a/frontend/src/message.jsx b/frontend/src/message.jsx
index 4741bc7..be520da 100644
--- a/frontend/src/message.jsx
+++ b/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;
\ No newline at end of file