md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update Notification component to use message and type props

Browse Source
This commit is contained in:
Md Asif 2024-12-24 00:40:12 +05:30
parent f7fea99f30
commit 8b34a69dca
1 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Notification.jsx
View File

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