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

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

@ -1,27 +1,26 @@
import { useState } from "react";
import { FaEllipsisH } from "react-icons/fa";
import { useState } from 'react';
import { FaEllipsisH } from 'react-icons/fa';
const PopupMessage = ({ id }: { id: string }) => {
const [show, setShow] = useState(false);
const handleClose = () => {
setShow(false);
};
return (
<>
<div className="bg-grey-dark">
<div className="popup-btn text-2xl cursor-pointer" onClick={() => setShow(!show)}>
<FaEllipsisH className="fill-grey-light" />
</div>
{show && (
<div className="popup">
<div className="popup-content">
<div className="popup-item">Edit</div>
<div className="popup-item">Delete</div>
<div
className="popup-btn cursor-pointer rounded-full hover:bg-grey-light transition-all"
onClick={() => setShow(!show)}
>
<FaEllipsisH className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
</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>
</>
);
};