Factor out confirmation modal component.
This commit is contained in:
parent
cd6ed7dc55
commit
571c1307fa
52
web/components/confirmation-modal.tsx
Normal file
52
web/components/confirmation-modal.tsx
Normal file
|
@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
|
@ -7,6 +7,7 @@ import { Title } from './title'
|
||||||
import { User } from '../lib/firebase/users'
|
import { User } from '../lib/firebase/users'
|
||||||
import { YesNoCancelSelector } from './yes-no-selector'
|
import { YesNoCancelSelector } from './yes-no-selector'
|
||||||
import { Spacer } from './layout/spacer'
|
import { Spacer } from './layout/spacer'
|
||||||
|
import { ConfirmationModal } from './confirmation-modal'
|
||||||
|
|
||||||
export function ResolutionPanel(props: {
|
export function ResolutionPanel(props: {
|
||||||
creator: User
|
creator: User
|
||||||
|
@ -17,8 +18,6 @@ export function ResolutionPanel(props: {
|
||||||
|
|
||||||
const [outcome, setOutcome] = useState<'YES' | 'NO' | 'CANCEL' | undefined>()
|
const [outcome, setOutcome] = useState<'YES' | 'NO' | 'CANCEL' | undefined>()
|
||||||
|
|
||||||
const resolveDisabled = false
|
|
||||||
|
|
||||||
function resolve() {
|
function resolve() {
|
||||||
console.log('resolved', outcome)
|
console.log('resolved', outcome)
|
||||||
}
|
}
|
||||||
|
@ -70,34 +69,23 @@ export function ResolutionPanel(props: {
|
||||||
|
|
||||||
<Spacer h={3} />
|
<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
|
|
||||||
</label>
|
|
||||||
<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>
|
<p>Are you sure you want to resolve this market?</p>
|
||||||
<div className="modal-action">
|
</ConfirmationModal>
|
||||||
<label htmlFor="resolution-modal" className="btn">
|
|
||||||
Back
|
|
||||||
</label>
|
|
||||||
<label
|
|
||||||
htmlFor="resolution-modal"
|
|
||||||
className={clsx('btn', submitButtonClass)}
|
|
||||||
onClick={resolve}
|
|
||||||
>
|
|
||||||
Resolve
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Col>
|
</Col>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user