Improving Message Section...

src/components/ChatMain/ChatMain.jsx

@@ -4,10 +4,10 @@ import Message from '../Message';
 function ChatMain() {
   return (
     <div className='chat_main'>
-        <Message/>
-        <Message/>
-        <Message/>
-        <Message/>
+        <Message message={"Hello"} time = "10AM" isReceived ={false} />
+        <Message message={"Hi"} time = "11AM" isReceived ={true} />
+        <Message message={"How are you"} time = "11:10AM" isReceived ={false} />
+        <Message message={"I am good what about you..."} time = "11AM" isReceived ={true}/>
     </div>
   )
 }

src/components/Message/Message.css

@@ -0,0 +1,16 @@
+.message{
+    width:100%;
+    display:flex;
+    flex-direction: column;
+    align-items: end;
+}
+
+.message__content{
+    width:200px;
+    background-color:gray;
+}
+
+.message__time{
+    font-size:0.8em;
+    color:gray;
+}

src/components/Message/Message.jsx

@@ -1,8 +1,16 @@
 import React from 'react'
-
-function Message() {
+import "./Message.css";
+function Message({
+  message,
+  time,
+  isReceived=false,
+}) {
   return (
-    <div>Message</div>
+
+    <div className={"message "+ isReceived?"left":""}>
+      <div className='message__content'>{message}</div>
+      <span className='message__time'>{time}</span>
+      </div>
   )
 }