add: ProfileImage in ChatList.jsx

Celesca · Nov 25, 2024 · e7b4d0e · e7b4d0e
1 parent d5f2066
commit e7b4d0e
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/frontend/src/components/ChatList.jsx b/frontend/src/components/ChatList.jsx
@@ -5,14 +5,21 @@ const ChatList = ({ chats, onSelectChat }) => {
     <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>
-        {chats.map((contact) => (
+        {chats.map((chat) => (
           <li
-            key={contact.UserID}
-            onClick={() => onSelectChat(contact)}
-            className="p-4 border-b hover:bg-gray-200 cursor-pointer"
+            key={chat.UserID}
+            onClick={() => onSelectChat(chat)}
+            className="p-4 border-b hover:bg-gray-200 cursor-pointer flex items-center"
           >
-            <p className="font-semibold">{contact.UserName}</p>
-            <p className="text-sm text-gray-500 truncate">{contact.MessageContent}</p>
+            <img
+              src={chat.ProfileImage}
+              alt={`${chat.UserName}'s profile`}
+              className="w-10 h-10 rounded-full mr-4"
+            />
+            <div>
+              <p className="font-semibold">{chat.UserName}</p>
+              <p className="text-sm text-gray-500 truncate">{chat.MessageContent}</p>
+            </div>
           </li>
         ))}
       </ul>