49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import clsx from "clsx";
|
|
import { Copy } from "lucide-react";
|
|
import { motion } from "motion/react";
|
|
import PropTypes from "prop-types";
|
|
|
|
function Notification({ message, type }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ y: 15, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 15, opacity: 0 }}
|
|
className={clsx(
|
|
"p-2 pl-8 mb-8 font-body text-lg border-2 rounded-3xl flex items-center gap-2",
|
|
type === "error"
|
|
? "bg-error-surface text-white border-error"
|
|
: type === "success"
|
|
? "bg-success text-white border-green-700"
|
|
: type === "warning"
|
|
? "bg-warning-surface text-white border-warning"
|
|
: ""
|
|
)}
|
|
>
|
|
{message.split(":").map((msg, index) => {
|
|
return index === 1 ? (
|
|
<span key={index} className="border-b border-dashed">
|
|
{msg}
|
|
</span>
|
|
) : (
|
|
<span key={index}>{msg}</span>
|
|
);
|
|
})}
|
|
{message.split(":")[1] && (
|
|
<Copy
|
|
cursor={"pointer"}
|
|
size={15}
|
|
onClick={navigator.clipboard.writeText(message.split(":")[1].trim())}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
Notification.propTypes = {
|
|
message: PropTypes.string.isRequired,
|
|
type: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default Notification;
|