Footer completed...

src/components/ChatFooter/ChatFooter.css

@@ -0,0 +1,46 @@
+.chat_footer{
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    gap:1em;
+    padding:1em 2em;
+    background-color: var(--SECONDARY-COLOR);
+    height:70px;
+    border-top:2px solid var(--BORDER-COLOR);
+}
+
+.send_options{
+    display: flex;
+    align-items: center;
+    gap:0.7em;
+    height:100%;
+    /* width:100%; */
+}
+.send_options_btn{
+    height:2em;
+    aspect-ratio: 1;
+    color: rgb(140, 139, 139);;
+}
+
+.text_box{
+    height:100%;
+    flex-grow:1;
+    border:1px solid var(--BORDER-COLOR);
+    border-radius: 5px;
+
+    padding:1em;
+    font-weight:500;
+    
+}
+.text_box::placeholder{
+    text-align: center;
+}
+
+.send_icon{
+    height:2.2em;
+    aspect-ratio: 1;
+    color:white;
+    background-color: var(--PRIMARY-COLOR);
+    border-radius: 50%;
+    padding:6px;
+}

src/components/ChatFooter/ChatFooter.jsx

@@ -1,8 +1,19 @@
 import React from 'react'
+import "./ChatFooter.css";
+import { PaperAirplaneIcon, PhotoIcon, PaperClipIcon, FaceSmileIcon } from "@heroicons/react/24/solid";
 
 function ChatFooter() {
   return (
-    <div className='chat_footer'>Chat Footer</div>
+    <footer className='chat_footer'>
+      <div className='send_options'>
+
+        <FaceSmileIcon className='send_options_btn' />
+        <PhotoIcon className='send_options_btn' />
+        <PaperClipIcon className='send_options_btn' />
+      </div>
+      <input className="text_box" type="text" placeholder='Message' />
+      <PaperAirplaneIcon className='send_icon' />
+    </footer>
   )
 }