ft_transcendence/containers/react/src/components/Alert/YellowAlert.jsx
Little Dipper fcd7fdc905 alert
2023-06-13 19:53:36 +02:00

37 lines
775 B
JavaScript

import Backdrop from "../Sidebar/Backdrop"
import { motion } from 'framer-motion'
import { GrTrophy } from "react-icons/gr";
import '../../styles/Messages.css'
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
function YellowAlert ({handleClose, text}) {
return(
<Backdrop>
<motion.div
onClick={(e) => e.stopPropagation()}
className="yellowAlert"
variant={dropIn}
initial="hidden"
animate="visible"
exit="exit"
>
<GrTrophy/>
<p>{text}</p>
</motion.div>
{setTimeout(handleClose, 3000)}
</Backdrop>
)
}
export default YellowAlert