feat: add export to .md button

app/components/ui-lib.tsx

@@ -1,5 +1,8 @@
 import styles from "./ui-lib.module.scss";
 import LoadingIcon from "../icons/three-dots.svg";
+import CloseIcon from "../icons/close.svg";
+import { createRoot } from 'react-dom/client'
+import { IconButton } from "./button";
 
 export function Popover(props: {
   children: JSX.Element;
@@ -46,4 +49,43 @@ export function Loading() {
     alignItems: "center",
     justifyContent: "center"
   }}><LoadingIcon /></div>
+}
+
+interface ModalProps {
+  title: string,
+  children?: JSX.Element,
+  actions?: JSX.Element[],
+  onClose?: () => void,
+}
+export function Modal(props: ModalProps) {
+  return <div className={styles['modal-container']}>
+    <div className={styles['modal-header']}>
+      <div className={styles['modal-title']}>{props.title}</div>
+
+      <div className={styles['modal-close-btn']} onClick={props.onClose}>
+        <CloseIcon />
+      </div>
+    </div>
+
+    <div className={styles['modal-content']}>{props.children}</div>
+
+    <div className={styles['modal-footer']}>
+      <div className={styles['modal-actions']}>
+        {props.actions?.map(action => <div className={styles['modal-action']}>{action}</div>)}
+      </div>
+    </div>
+  </div>
+}
+
+export function showModal(props: ModalProps) {
+  const div = document.createElement('div')
+  div.className = "modal-mask";
+  document.body.appendChild(div)
+
+  const root = createRoot(div)
+  root.render(<Modal {...props} onClose={() => {
+    props.onClose?.();
+    root.unmount();
+    div.remove();
+  }}></Modal>)
 }