added Contact component

src/App.css

@@ -1,19 +1,23 @@
 .App {
-  height:100vh;
-  display:flex;
+  height: 100vh;
+  display: flex;
   /* align-items: stretch; */
 }
 
-.contacts{
+.contacts {
   background-color: rgb(115, 40, 214);
-  color:white;
-  min-width:300px;
-
-  display:flex;
+  color: white;
+  width: 300px;
+  
+  flex-shrink: 0;
+  /* overflow:hidden; */
+  display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.chat{
+.chat {
   background-color: rgb(255, 255, 255);
+  height: 100%;
+  width: -webkit-fill-available;
 }

src/components/Chat/Chat.css

@@ -1,6 +1,4 @@
 .chat{
-    height:100%;
-    width:100%;
     display:flex;
     flex-direction: column;
     background-color: rgb(208, 208, 208);

src/components/Contact/Contact.css

@@ -0,0 +1,50 @@
+.contact{
+    height:70px;
+    width:100%;
+    padding:0.8em;
+    display:flex;
+    align-items: center;
+    column-gap: 1em;
+    border-bottom:2px solid rgba(179, 179, 179, 0.41) ;
+    overflow: hidden;
+}
+
+
+.contact.active{
+    background-color: rgba(179, 179, 179, 0.41);    
+    border-color:transparent;
+
+}
+
+.contact:last-child{
+    border:none;
+}
+
+.contact>div{
+    width:70%;
+    /* background-color: black; */
+    height:100%;
+}
+
+.contact__img{
+    height:100%;
+    aspect-ratio: 1;
+    background-color: aliceblue;
+    border-radius: 50%;
+
+}
+
+.contact__name{
+    text-transform: capitalize;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.contact__lastmsg{
+    /* display: none; */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color:rgb(234, 234, 234);
+    font-size:0.9em;
+    white-space: nowrap;
+}

src/components/Contact/Contact.jsx

@@ -1,8 +1,24 @@
 import React from 'react'
+import "./Contact.css";
+
+function Contact({
+  profile_pic,
+  name,
+  lastmessage = "",
+  isActive = false,
+}) {
+
 
-function Contact() {
   return (
-    <div>Contact</div>
+    <div className={(isActive?"active":"")+' contact'}>
+      <img src={profile_pic} className='contact__img' />
+      <div>
+        <h4 className='contact__name'>{name}</h4>
+        {lastmessage != "" &&
+          <p className='contact__lastmsg'>{lastmessage}</p>
+        }
+      </div>
+    </div>
   )
 }
 

src/components/Contacts/Contacts.jsx

@@ -7,9 +7,15 @@ function Contacts() {
         <div className='contacts'>
 
             <Search />
-  
-            <Contact />
-            <Contact />
+
+            <Contact profile_pic={"logo512.png"} name={"anuj"} lastmessage={"good morning"} />
+            <Contact
+                profile_pic={"https://image.cdn2.seaart.ai/2023-06-26/38717300371525/37c6db0143cbddb29c5cba13783ee5b67f5a2c8b_low.webp"}
+                name={"Kathrina"}
+                lastmessage={"Well this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long messageWell this is a long message"}
+            />
+            <Contact profile_pic={"logo512.png"} name={"anuj"} lastmessage={"good morning"}/>
+            <Contact profile_pic={"logo512.png"} name={"anuj"} lastmessage={"good morning"} />
         </div>
     )
 }

src/components/Search/Search.css

@@ -1,18 +1,21 @@
 .search{
+    width: 80%;
     background-color: #fff;
     border-radius: 50px;
 
     display:flex;
     align-items: center;
+    justify-content: center;
     overflow:hidden;
 
     margin:2em 0;
-    padding:0.5em;
+    padding:0.5em 0.8em;
 }
 
 .search>input{
     border:none;
     outline:none;
+    flex-grow: 1;
     /* padding:0.5em; */
 }