Factor out confirmation modal component.

web/components/confirmation-modal.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+
+export function ConfirmationModal(props: {
+  id: string
+  openModelBtn: {
+    label: string
+    className?: string
+  }
+  cancelBtn?: {
+    label?: string
+    className?: string
+  }
+  submitBtn?: {
+    label?: string
+    className?: string
+  }
+  onSubmit: () => void
+  children: any
+}) {
+  const { id, openModelBtn, cancelBtn, submitBtn, onSubmit, children } = props
+
+  return (
+    <>
+      <label
+        htmlFor={id}
+        className={clsx('btn modal-button', openModelBtn.className)}
+      >
+        {openModelBtn.label}
+      </label>
+      <input type="checkbox" id={id} className="modal-toggle" />
+
+      <div className="modal">
+        <div className="modal-box">
+          {children}
+
+          <div className="modal-action">
+            <label htmlFor={id} className={clsx('btn', cancelBtn?.className)}>
+              {cancelBtn?.label ?? 'Cancel'}
+            </label>
+            <label
+              htmlFor={id}
+              className={clsx('btn', submitBtn?.className)}
+              onClick={onSubmit}
+            >
+              {submitBtn?.label ?? 'Submit'}
+            </label>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

web/components/resolution-panel.tsx

@@ -7,6 +7,7 @@ import { Title } from './title'
 import { User } from '../lib/firebase/users'
 import { YesNoCancelSelector } from './yes-no-selector'
 import { Spacer } from './layout/spacer'
+import { ConfirmationModal } from './confirmation-modal'
 
 export function ResolutionPanel(props: {
   creator: User
@@ -17,8 +18,6 @@ export function ResolutionPanel(props: {
 
   const [outcome, setOutcome] = useState<'YES' | 'NO' | 'CANCEL' | undefined>()
 
-  const resolveDisabled = false
-
   function resolve() {
     console.log('resolved', outcome)
   }
@@ -70,34 +69,23 @@ export function ResolutionPanel(props: {
 
       <Spacer h={3} />
 
-      <label
+      <ConfirmationModal
-        htmlFor="resolution-modal"
+        id="resolution-modal"
-        className={clsx(
+        openModelBtn={{
-          'btn modal-button border-none self-start m-2',
+          className: clsx('border-none self-start m-2', submitButtonClass),
-          resolveDisabled ? 'btn-disabled' : submitButtonClass
+          label: 'Resolve',
-        )}
+        }}
+        cancelBtn={{
+          label: 'Back',
+        }}
+        submitBtn={{
+          label: 'Resolve',
+          className: submitButtonClass,
+        }}
+        onSubmit={resolve}
       >
-        Resolve
+        <p>Are you sure you want to resolve this market?</p>
-      </label>
+      </ConfirmationModal>
-      <input type="checkbox" id="resolution-modal" className="modal-toggle" />
-
-      <div className="modal">
-        <div className="modal-box">
-          <p>Are you sure you want to resolve this market?</p>
-          <div className="modal-action">
-            <label htmlFor="resolution-modal" className="btn">
-              Back
-            </label>
-            <label
-              htmlFor="resolution-modal"
-              className={clsx('btn', submitButtonClass)}
-              onClick={resolve}
-            >
-              Resolve
-            </label>
-          </div>
-        </div>
-      </div>
     </Col>
   )
 }