did card menu

Isaac-miles · Feb 20, 2023 · de7a1ef · de7a1ef
1 parent 2f3b7cc
commit de7a1ef
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 148 deletions.
diff --git a/components/utils/BodyHeader.tsx b/components/utils/BodyHeader.tsx
@@ -1,3 +1,5 @@
+import { useContext } from "react"
+import { ChatContext } from "../../store/chat-context"
 import Image from 'next/image'
 import {Fragment, useState} from 'react'
 import {VscEllipsis,VscDeviceCameraVideo} from 'react-icons/vsc';
@@ -8,14 +10,20 @@ import { RxDividerVertical } from "react-icons/rx";
 
 
 function BodyHeader() {
+  const ctx = useContext(ChatContext)
+  const activeChat = ctx.activeChat
 
   return (
     <Fragment>
-      <section className='w-2/3 h-14 float-left border-x mt-10 items-center justify-between bg-green-600'>
+      <section className='w-full h-14 float-left border-x items-center justify-between'>
 
        <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'/>
+       { activeChat.id && (<div className= 'flex items-center justify-between bg-[#f0eeee] h-14 p-2 '> 
+
+        <div className="flex items-center h-14 w-1/6">
+        <Image src={activeChat.img} alt='profile pic' height={50} width={50} className='rounded-full'/>
+         <h1 className="text-xl  ml-2">{activeChat.name}</h1>
+        </div>
 
          <div className='hidden md:flex justify-between items-center mx-2'>
          <VscDeviceCameraVideo className='m-5  text-[#978f8f] text-3xl'/>
@@ -25,7 +33,7 @@ function BodyHeader() {
          <VscEllipsis className='m-5  text-[#978f8f] text-3xl'/>
        </div>
 
-        </div>
+        </div>) }
 
         </div>
 

diff --git a/components/utils/chartCard.tsx b/components/utils/chartCard.tsx
@@ -1,5 +1,6 @@
 import React, {useContext} from 'react'
 import { ChatContext } from '../../store/chat-context';
+import MenuCard from './subMenuCard';
 import Image from 'next/image'
 import {useState} from 'react'
 import {VscChevronDown} from 'react-icons/vsc';
@@ -13,12 +14,21 @@ interface details{
   message: string,
   clicked:()=>void
 }
+
  function ChartCard(props: details) {
-  const [hoverOver, setHover] = useState<boolean>(false)
-  const chatCtx = useContext(ChatContext);
+  const cardMen = ['Archive chat', 'Mute notification', 'Delete chat', 'Unpin chat', 'Mark as unread']
+   const [hoverOver, setHover] = useState<boolean>(false)
+   const [menuCard, setMenuCard] = useState<boolean>(false)
+   const chatCtx = useContext(ChatContext);
 
   const hoverEnter =()=>{setHover(true)}
   const hoverLeave =()=>{setHover(false)}
+  const hoverMenu =()=>{
+    console.log(menuCard);
+    setMenuCard(true)
+    console.log('after' , menuCard);
+
+  }
 
   return (
     <div className='relative flex items-center h-20  m-0 border-y hover:bg-[#f0eeee]'  onMouseEnter={hoverEnter} onMouseLeave={hoverLeave} onClick={props.clicked}>
@@ -38,12 +48,15 @@ interface details{
             <div className='flex justify-between h-10  w-full cursor-pointer'>
               <div className=' w-4/5'>{props.message}</div>
               <div className='text-end w-1/5 text-lg'></div>
-              { hoverOver && <VscChevronDown className='text-2xl'/>}
+              { hoverOver && <VscChevronDown className='text-2xl bg-red-800 ' onClickCapture={hoverMenu}/>}
 
            </div>
-
+         {/* { menuCard && <MenuCard />} */}
+         {/* <MenuCard cardMen={cardMen} /> */}
           </div>
+
       </div>
+
 
 
   )

diff --git a/components/utils/subMenuCard.tsx b/components/utils/subMenuCard.tsx
@@ -0,0 +1,31 @@
+import React, { FC, PropsWithChildren, useContext} from 'react'
+
+type cardMen = string[]
+
+const MenuCard:FC<PropsWithChildren> =(props, cardMenus:cardMen)=> {
+
+  return (
+    <div className='card w-[217px]'>
+      <div>
+      <ul>
+        <li className='hover:bg-[#f0eeee] p-2' >
+          <div>Home</div>
+        </li>
+        <li className='hover:bg-[#f0eeee] p-2'>
+          <div>Home</div>
+        </li>
+        <li className='hover:bg-[#f0eeee] p-2'>
+          <div>Home</div>
+        </li>
+        {/* <li>Clear</li>
+        <li>Delete</li>
+        <li>Profile</li> */}
+      </ul>
+      </div>
+
+
+    </div>
+  )
+}
+
+export default MenuCard