Add Paul's Toolbox Contents

components/ui/form/form.module.less

@@ -0,0 +1,13 @@
+.form {
+  flex: 1;
+  gap: 1em;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    opacity: .6;
+    display: block;
+    text-align: left;
+    margin-bottom: .5em;
+  }
+}

components/ui/form/index.tsx

@@ -0,0 +1,17 @@
+import type { FormHTMLAttributes } from "react";
+import { clsn } from "~utils";
+import styles from "./form.module.less";
+
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+
+}
+
+function Form({ children, className, ...props }: FormProps) {
+  return (
+    <form className={clsn(styles.form, className)} {...props}>
+      {children}
+    </form>
+  );
+}
+
+export default Form;

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;

components/ui/message/message.module.less

@@ -0,0 +1,34 @@
+.message {
+  left: 0;
+  right: 0;
+  bottom: 5em;
+  z-index: 2;
+  margin: 0 1em;
+  display: flex;
+  position: fixed;
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+.item {
+  color: #fff;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 50em;
+  overflow: hidden;
+  position: relative;
+  border-radius: .5em;
+  background-color: rgba(0, 0, 0, .6);
+  box-shadow: 0 0 5em rgba(0, 0, 0, .1);
+
+  .content, .close {
+    vertical-align: middle;
+  }
+
+  .close {
+    line-height: 1;
+    cursor: pointer;
+    font-size: 1.5em;
+    margin-left: 1em;
+  }
+}

components/ui/message/utils.ts

@@ -0,0 +1,27 @@
+export interface MessageItem {
+  key?: string;
+  content: React.ReactNode;
+  duration?: number;
+}
+
+type MessageFn = (Message: MessageItem) => void;
+
+const addMessageFn: MessageFn[] = [];
+
+export const add = (Message: MessageItem) => {
+  addMessageFn.forEach((item) => {
+    item(Message);
+  });
+}
+
+export const addFn = (fn: MessageFn) => {
+  return addMessageFn.push(fn) - 1;
+}
+
+export const removeFn = (fn: MessageFn) => {
+  const index = addMessageFn.indexOf(fn);
+
+  if (index > -1) {
+    addMessageFn.splice(index, 1);
+  }
+}

components/ui/placeholder/index.tsx

@@ -0,0 +1,28 @@
+import { IconSad } from "~assets/icons";
+import type { PropsWithChildren } from "react";
+import styles from "./placeholder.module.less";
+
+interface PlaceholderProps extends PropsWithChildren {
+  className?: string;
+  show?: boolean;
+  value: string;
+}
+
+function Placeholder({ className, show, value, children }: PlaceholderProps) {
+  if (show === undefined || show) {
+    return (
+      <div className={styles.placeholder}>
+        <IconSad />
+        <p>{value}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+}
+
+export default Placeholder;

components/ui/placeholder/placeholder.module.less

@@ -0,0 +1,13 @@
+.placeholder {
+  margin: 2em 0;
+  text-align: center;
+
+  svg {
+    width: 4em;
+    margin-bottom: 1em;
+  }
+
+  p {
+    opacity: .6;
+  }
+}