whatsapp cloned

Isaac-miles · Feb 8, 2023 · 1e95649 · 1e95649
1 parent da76cdf
commit 1e95649
Show file tree

Hide file tree

Showing 18 changed files with 423 additions and 74 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+// import Image from 'next/image'
+// import Link from 'next/link'
+
+import { VscChromeMaximize,VscChromeClose,VscChromeMinimize} from 'react-icons/vsc';
+
+ function Header() {
+  return (
+
+    <header className='fixed h-10 top-0 z-30 p-0 flex w-full items-center justify-between bg-[#075e54] '>
+      <div className='flex -mx-20 justify-center md:w-1/5'>
+
+      <div className ='relative h-10'>
+      {/* <Image src="https://rb.gy/vsvv2o" alt='' width={50} height= {50}/> */}
+      <h1 className='text-white text-center p-1'>whatsUp</h1>
+
+      </div>
+
+      </div>
+
+       <div className='hidden md:flex justify-between items-center  mx-2 h-10'>
+        <ul>
+          <li className='uLink'><VscChromeMinimize className='headerLink'/></li>
+          <li className='uLink'><VscChromeMaximize className='headerLink'/></li>
+          <li className='uLink'><VscChromeClose className='headerLink'/></li>
+          <li></li>
+          <li></li>
+        </ul>
+       </div>
+    </header>
+  )
+}
+
+
+export default Header
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -0,0 +1,56 @@
+import Image from 'next/image'
+import {Fragment, useState} from 'react'
+import { VscAdd,VscEllipsis,VscListFilter,VscArrowLeft} from 'react-icons/vsc';
+import { TbCircleDotted } from "react-icons/tb";
+import { AiOutlineSearch } from "react-icons/ai";
+import ChatWrapper from './utils/chatWrapper';
+
+
+function Sidebar() {
+
+const [txF, setTxF] = useState<boolean>(false)
+const focusTxf =() =>{
+ setTxF(true) 
+}
+const blurTxf =() =>{
+ setTxF(false) 
+}
+
+  return (
+    <Fragment>
+      <section className='w-1/3 min-h-screen float-left mt-10'>
+
+       <div  className='fixed z-10 w-1/3  '>
+        {/* profile section */}
+        <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'>
+         <TbCircleDotted className='m-5  text-[#978f8f] font-bold text-3xl'/>
+         <VscAdd className='m-5  text-[#978f8f] font-bold text-3xl'/>
+         <VscEllipsis className='m-5  text-[#978f8f] font-bold text-3xl'/>
+       </div>
+
+        </div>
+
+        {/* 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' />
+        { !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>
+       <VscListFilter className='mr-1 text-[#978f8f] font-bold text-3xl'/>
+
+        </div>
+        </div>
+        <ChatWrapper/>
+
+      </section>
+
+
+
+    </Fragment>
+  )
+}
+export default  Sidebar
diff --git a/components/utils/Main.tsx b/components/utils/Main.tsx
@@ -0,0 +1,43 @@
+import Image from 'next/image'
+import {Fragment, useState} from 'react'
+import { VscAdd,VscEllipsis,VscListFilter,VscArrowLeft} from 'react-icons/vsc';
+import { TbCircleDotted } from "react-icons/tb";
+import { AiOutlineSearch } from "react-icons/ai";
+
+
+
+function Main() {
+
+// const [txF, setTxF] = useState<boolean>(false)
+// const focusTxf =() =>{
+//  setTxF(true) 
+// }
+// const blurTxf =() =>{
+//  setTxF(false) 
+// }
+
+  return (
+    <Fragment>
+      <section className='w-2/3 float-right border-x mt-10'>
+
+       <div  className='fixed z-10 bg-[#f0eeee] w-full'>
+        {/* profile section */}
+        <div className= 'flex items-center justify-between 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'>
+         <TbCircleDotted className='m-5  text-[#978f8f] font-bold text-3xl'/>
+         <VscAdd className='m-5  text-[#978f8f] font-bold text-3xl'/>
+         <VscEllipsis className='m-5  text-[#978f8f] font-bold text-3xl'/>
+       </div>
+
+        </div>
+
+        </div>
+
+      </section>
+
+    </Fragment>
+  )
+}
+export default Main
diff --git a/components/utils/chartCard.tsx b/components/utils/chartCard.tsx
@@ -0,0 +1,47 @@
+import Image from 'next/image'
+import {useState} from 'react'
+import {VscChevronDown} from 'react-icons/vsc';
+
+
+interface details{
+  img:string,
+  name: string,
+  dateAndTime: string,
+  message: string,
+
+}
+ function ChartCard(props: details) {
+  const [hoverOver, setHover] = useState<boolean>(false)
+  const hoverEnter =()=>{setHover(true)}
+  const hoverLeave =()=>{setHover(false)}
+
+  return (
+    <div className='relative flex items-center h-20  m-0 border-y hover:bg-[#f0eeee]' onMouseEnter={hoverEnter} onMouseLeave={hoverLeave}>
+      <div className ='flex-none w-16 h-20 ml-1 py-4'>
+        <div className='items-center w-full justify-center '>
+        <Image src={props.img} alt='profile pic' height={49} width={49} className='rounded-full'/>
+        </div>
+      </div>
+
+          <div className="w-full pr-1  h-20  m-0">
+
+            <div className='flex justify-between h-10 w-full '>
+              <div className=' w-4/5 text-xl pt-1'>{props.name}</div>
+              <div className=' w-1/5 text-lg text-center'>{props.dateAndTime}</div>
+            </div>
+
+            <div className='flex justify-between h-10  w-full'>
+              <div className=' w-4/5'>{props.message}</div>
+              <div className='text-end w-1/5 text-lg'></div>
+              { hoverOver && <VscChevronDown className='text-2xl'/>}
+
+        </div>
+
+          </div>
+      </div>
+
+
+  )
+}
+
+export default ChartCard
diff --git a/components/utils/chatWrapper.tsx b/components/utils/chatWrapper.tsx
@@ -0,0 +1,89 @@
+import React, { FC, PropsWithChildren } from 'react'
+import ChartCard from './chartCard'
+
+const ChatWrapper:FC<PropsWithChildren> =()=> {
+  const chats = [
+  {
+  id:1,
+  message: 'hello Miles',
+  img: '/img2.jpg',
+  name: 'Omokafe',
+  timeAndDate:  new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:2,
+  message: 'yes o I got called into bar today',
+  img: '/img2.jpg',
+  name: 'David',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:3,
+  message: 'not so true ooo hhahahah',
+  img: '/img4.png',
+  name: 'Junior',
+  timeAndDate:  new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:4,
+  message: 'my phone is faulty at the moment',
+  img: '/img4.png',
+  name: 'Isaac',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:5,
+  message: 'wahala no too much ',
+  img: '/img2.jpg',
+  name: 'Miles',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:6,
+  message: 'wahala no too much ',
+  img: '/img3.png',
+  name: 'Milo',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:7,
+  message: 'wahala no too much ',
+  img: '/img2.jpg',
+  name: 'Helen',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:8,
+  message: 'wahala no too much ',
+  img: '/img4.png',
+  name: 'Mathew',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:9,
+  message: 'wahala no too much ',
+  img: '/img3.png',
+  name: 'John',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      },
+  {
+  id:10,
+  message: 'wahala no too much ',
+  img: '/img2.jpg',
+  name: 'John',
+  timeAndDate: new Date().getUTCFullYear().toLocaleString()
+      }
+    ]
+    const activeChat = chats.map((chat)=>(
+       <ChartCard key={chat.id} name={chat.name} message={chat.message} img={chat.img} dateAndTime ={chat.timeAndDate} />
+
+    ))
+  return (
+    <section className='relative top-28 w-full  border-x overflow-y-scroll  scroll-smooth '>
+      {activeChat}
+    </section>
+  )
+}
+
+
+export default ChatWrapper
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  images:{
+    domains: ["rb.gy"]
+  }
 }