refactor: moved dialog to prompt to make dialog reusable

web/src/components/Dialog.jsx

@@ -1,10 +1,8 @@
 import { h, Fragment } from 'preact';
-import Button from './Button';
-import Heading from './Heading';
 import { createPortal } from 'preact/compat';
 import { useState, useEffect } from 'preact/hooks';
 
-export default function Dialog({ actions = [], portalRootID = 'dialogs', title, text }) {
+export default function Dialog({ children, portalRootID = 'dialogs' }) {
   const portalRoot = portalRootID && document.getElementById(portalRootID);
   const [show, setShow] = useState(false);
 
@@ -27,17 +25,7 @@ export default function Dialog({ actions = [], portalRootID = 'dialogs', title,
             show ? 'scale-100 opacity-100' : ''
           }`}
         >
-          <div className="p-4">
-            <Heading size="lg">{title}</Heading>
-            <p>{text}</p>
-          </div>
-          <div className="p-2 flex justify-start flex-row-reverse space-x-2">
-            {actions.map(({ color, text, onClick, ...props }, i) => (
-              <Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
-                {text}
-              </Button>
-            ))}
-          </div>
+          {children}
         </div>
       </div>
     </Fragment>

web/src/components/Prompt.jsx

@@ -0,0 +1,22 @@
+import { h, Fragment } from 'preact';
+import Button from './Button';
+import Heading from './Heading';
+import Dialog from './Dialog';
+
+export default function Prompt({ actions = [], title, text }) {
+return (
+  <Dialog>
+    <div className="p-4">
+      <Heading size="lg">{title}</Heading>
+      <p>{text}</p>
+    </div>
+    <div className="p-2 flex justify-start flex-row-reverse space-x-2">
+      {actions.map(({ color, text, onClick, ...props }, i) => (
+        <Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
+          {text}
+        </Button>
+      ))}
+    </div>
+  </Dialog>
+)
+}