63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import Backdrop from "../Sidebar/Backdrop.tsx"
|
|
import { motion } from 'framer-motion'
|
|
import { GrTrophy } from "react-icons/gr";
|
|
import '../../styles/Messages.css'
|
|
import React from "react";
|
|
import { MdQrCodeScanner } from "react-icons/md";
|
|
import { GiCrownedSkull, GiWingedSword } from "react-icons/gi";
|
|
|
|
const dropIn = {
|
|
hidden: {
|
|
y: "-100vh",
|
|
},
|
|
visible: {
|
|
y: "0",
|
|
},
|
|
exit: {
|
|
y: "-100vh",
|
|
},
|
|
};
|
|
|
|
interface AlertProps {
|
|
handleClose: Function,
|
|
text: string,
|
|
icon: number
|
|
}
|
|
|
|
function YellowAlert({ handleClose, text, icon }: AlertProps) {
|
|
{ setTimeout(handleClose, 3000) }
|
|
return (
|
|
<Backdrop onClick={handleClose}>
|
|
<motion.div
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="yellowAlert"
|
|
// variant={dropIn}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="exit"
|
|
>
|
|
|
|
{icon === 0 ? (
|
|
<GrTrophy />
|
|
) : ("")}
|
|
{icon === 1 ? (
|
|
<MdQrCodeScanner />
|
|
) : ("")}
|
|
|
|
{icon === 2 ? (
|
|
<GiCrownedSkull />
|
|
) : ("")}
|
|
|
|
{icon === 3 ? (
|
|
<GiWingedSword />
|
|
) : ("")}
|
|
|
|
<div className="text_alert">
|
|
<h5>{text}</h5>
|
|
</div>
|
|
</motion.div>
|
|
</Backdrop>
|
|
)
|
|
}
|
|
|
|
export default YellowAlert |