Added fonts and footer

components/Footer.tsx

@@ -0,0 +1,26 @@
+import {VscSmiley} from 'react-icons/vsc';
+import { MdAttachFile } from "react-icons/md";
+import { BsMic } from "react-icons/bs";
+
+
+
+function Footer() {
+
+  return (
+      <footer className='w-2/3 h-14 float-left border-x mt-10 items-center justify-between bg-green-600'>
+
+
+       <div className= 'flex items-center justify-between bg-[#f0eeee] h-14 p-2 ' > 
+
+         <div className='flex justify-between items-center mx-2'>
+         <VscSmiley className='m-5  text-[#978f8f] text-3xl'/>
+         <MdAttachFile className='m-5  text-[#978f8f] text-4xl'/>
+        </div>
+          <input type="text" placeholder='Type a Message' className='w-4/5 p-2 rounded-md focus:border-none' />
+         <BsMic className='m-5  text-[#978f8f] text-4xl'/>
+
+        </div>
+      </footer>
+  )
+}
+export default Footer

components/MainChat.tsx

@@ -0,0 +1,12 @@
+import {Fragment} from 'react'
+import Footer from './Footer'
+import BodyHeader from './utils/BodyHeader'
+
+export default function MainChat() {
+  return (
+    <Fragment>
+      <BodyHeader/>
+      <Footer/>
+    </Fragment>
+  )
+}

components/Sidebar.tsx

@@ -18,7 +18,7 @@ const blurTxf =() =>{
 
   return (
     <Fragment>
-      <section className='w-1/3 min-h-screen float-left mt-10'>
+      <section className='w-1/3  float-left mt-10 overflow-clip'>
 
        <div  className='fixed z-10 w-1/3  '>
         {/* profile section */}
@@ -35,8 +35,8 @@ const blurTxf =() =>{
 
         {/* search section */}
         <div className= 'flex items-center justify-between bg-[#ffffff]  w-full border'> 
-          <div className='max-h-14 '>
-         <input type="search" onFocus={focusTxf} onBlur={blurTxf} placeholder='Search or start new chat' className='w-96 p-2 m-2 bg-[#f0eeee] rounded-md pl-14' />
+          <div className='max-h-14 w-full m-auto'>
+         <input type="search" onFocus={focusTxf} onBlur={blurTxf} placeholder='Search or start new chat' className='w-[95%] p-2 m-2 bg-[#f0eeee] rounded-md pl-14' />
         { !txF && <AiOutlineSearch className='relative -top-11 left-3  text-3xl  text-[#978f8f]'/>}
          { txF && <VscArrowLeft className='relative -top-11 left-3 text-3xl  text-[#075e54]'/>}
          </div>

components/utils/BodyHeader.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import {Fragment, useState} from 'react'
+import {VscEllipsis,VscDeviceCameraVideo} from 'react-icons/vsc';
+import { AiOutlineSearch} from "react-icons/ai";
+import { IoCallOutline } from "react-icons/io5";
+import { RxDividerVertical } from "react-icons/rx";
+
+
+
+function BodyHeader() {
+
+  return (
+    <Fragment>
+      <section className='w-2/3 h-14 float-left border-x mt-10 items-center justify-between bg-green-600'>
+
+       <div  className='fixed z-10 w-2/3'>
+       <div className= 'flex items-center justify-between bg-[#f0eeee] h-14 p-2 '> 
+         <Image src='/Passport.jpg' alt='profile pic' height={50} width={50} className='rounded-full'/>
+
+         <div className='hidden md:flex justify-between items-center mx-2'>
+         <VscDeviceCameraVideo className='m-5  text-[#978f8f] text-3xl'/>
+         <IoCallOutline className='m-5  text-[#978f8f] text-3xl'/>
+         <RxDividerVertical className='m-5  text-[#978f8f] text-4xl'/>
+         <AiOutlineSearch className='m-5  text-[#978f8f] text-3xl'/>
+         <VscEllipsis className='m-5  text-[#978f8f] text-3xl'/>
+       </div>
+
+        </div>
+
+        </div>
+
+      </section>
+
+    </Fragment>
+  )
+}
+export default BodyHeader

components/utils/chatWrapper.tsx

@@ -79,7 +79,7 @@ const ChatWrapper:FC<PropsWithChildren> =()=> {
 
     ))
   return (
-    <section className='relative top-28 w-full  border-x overflow-y-scroll  scroll-smooth '>
+    <section className='relative top-28 w-full border-x overflow-y-auto  scroll-smooth '>
       {activeChat}
     </section>
   )

pages/App.tsx

@@ -1,14 +1,14 @@
 import {Fragment}from 'react'
 import Header from '../components/Header'
+import MainChat from '../components/MainChat'
 import Sidebar from '../components/Sidebar'
-import Main from '../components/utils/Main'
 
 export default function App() {
   return (
     <Fragment>
      <Header/>
       <Sidebar/> 
-       <Main/> 
+       <MainChat/> 
     </Fragment>
   )
 }

styles/globals.css

@@ -1,9 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer components{ 
-
+  body{
+    @apply font-body
+  }
   .headerLink {
     @apply cursor-pointer mx-5 mt-3  text-[#ffffff] font-bold text-xl  
   }

tailwind.config.js

@@ -6,7 +6,11 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily:{
+        body:["Poppins", "sans-serif"]
+      }
+    },
   },
   plugins: [],
 }