refactor: update Notification component to use message and type props

src/components/Notification.jsx

@@ -3,49 +3,46 @@ import { Copy } from "lucide-react";
 import { motion } from "motion/react";
 import PropTypes from "prop-types";
 
-function Notification({ notification }) {
+function Notification({ message, type }) {
-return <motion.div
+  return (
-    initial={{ y: 15, opacity: 0 }}
+    <motion.div
-    animate={{ y: 0, opacity: 1 }}
+      initial={{ y: 15, opacity: 0 }}
-    exit={{ y: 15, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
-    className={clsx(
+      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",
-        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 ? (
-            <span key={index} className="border-b border-dashed">
+          <span key={index} className="border-b border-dashed">
-                {msg}
+            {msg}
-            </span>
+          </span>
         ) : (
-            <span key={index}>{msg}</span>
+          <span key={index}>{msg}</span>
         );
-    })}
+      })}
-    {notification.message.split(":")[1] && (
+      {message.split(":")[1] && (
         <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.shape({
+  message: PropTypes.string.isRequired,
-    visible: PropTypes.bool,
+  type: PropTypes.string.isRequired,
-    message: PropTypes.string,
-    type: PropTypes.string,
-  }),
 };
 
 export default Notification;