polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

popup menu message

This commit is contained in:
Guillaume Dorce 2022-09-28 15:44:45 +02:00
parent 798032bd8d
commit 2f1f4d7ffd
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/components/PopupMessage.tsx
View File

@ -1,27 +1,26 @@
import { useState } from "react"; import { useState } from 'react';
import { FaEllipsisH } from "react-icons/fa"; import { FaEllipsisH } from 'react-icons/fa';
const PopupMessage = ({id}: {id: string}) => { const PopupMessage = ({ id }: { id: string }) => {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const handleClose = () => {
setShow(false);
};
return ( return (
<>
<div className="bg-grey-dark"> <div className="bg-grey-dark">
<div className="popup-btn text-2xl cursor-pointer" onClick={() => setShow(!show)}> <div
<FaEllipsisH className="fill-grey-light" /> className="popup-btn cursor-pointer rounded-full hover:bg-grey-light transition-all"
</div> onClick={() => setShow(!show)}
{show && ( >
<div className="popup"> <FaEllipsisH className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
<div className="popup-content">
<div className="popup-item">Edit</div>
<div className="popup-item">Delete</div>
</div> </div>
</div> </div>
)} <div className={'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' + (show ? '' : ' hidden')}>
<div className="popup-content space-y-2">
<div className="popup-item text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark">Modifier</div>
<div className="popup-item text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red">Supprimer</div>
</div> </div>
</div>
</>
); );
}; };