Add Paul's Toolbox Contents

components/ui/message/index.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { type MessageItem, addFn, removeFn } from "./utils";
+
+import styles from "./message.module.less";
+
+function Message() {
+  const [message, setMessage] = useState<MessageItem>();
+
+  useEffect(() => {
+    const fn = (nextMessage: MessageItem) => {
+      const key = `${Math.ceil(performance.now())}-${Math.round(Math.random() * 100)}`;
+
+      setMessage({ ...nextMessage, key });
+
+      setTimeout(() => {
+        onClose();
+      }, nextMessage.duration || 5000);
+    };
+
+    addFn(fn);
+
+    return () => {
+      removeFn(fn);
+    };
+  }, []);
+
+  const onClose = () => {
+    setMessage(undefined);
+  }
+
+  return createPortal((
+    <div className={styles.message}>
+      {message && (
+        <div key={message.key} className={styles.item}>
+          <span className={styles.content}>{message.content}</span>
+          <button className={styles.close} onClick={() => onClose()}>×</button>
+        </div>
+      )}
+    </div>
+  ), document.body);
+}
+
+export default Message;