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">
+          {children}
-            <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>
         </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>
+)
+}

web/src/routes/Event.jsx

@@ -9,11 +9,11 @@ import Clip from '../icons/Clip';
 import Close from '../icons/Close';
 import Delete from '../icons/Delete';
 import Snapshot from '../icons/Snapshot';
-import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
 import VideoPlayer from '../components/VideoPlayer';
 import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
 import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
+import Prompt from '../components/Prompt';
 
 const ActionButtonGroup = ({ className, handleClickDelete, close }) => (
   <div className={`space-y-2 space-x-2 sm:space-y-0 xs:space-x-4 ${className}`}>
@@ -121,7 +121,7 @@ export default function Event({ eventId, close, scrollRef }) {
         </div>
         <ActionButtonGroup handleClickDelete={handleClickDelete} close={close} className="hidden sm:block" />
         {showDialog ? (
-          <Dialog
+          <Prompt
             onDismiss={handleDismissDeleteDialog}
             title="Delete Event?"
             text={