Modal

() => {
  const [active, open, close] = useModal()
  return (
    <>
      <Button medium onClick={open}>Open Modal</Button>
      <Modal.Modal active={active} onClickOutside={close}>
        <Modal.Body>
          <Modal.Header>
            <Modal.Title>Modal</Modal.Title>
            <Modal.Subtitle>
              This is a modal.
            </Modal.Subtitle>
          </Modal.Header>
          <Text noMargin>Some content contained within the modal.</Text>
        </Modal.Body>
        <Modal.Actions>
          <Modal.Action onClick={close}>
            Cancel
          </Modal.Action>
          <Modal.Action onClick={close}>
            Submit
          </Modal.Action>
        </Modal.Actions>
      </Modal.Modal>
    </>
  )
}

() => {
  const [active, open, close] = useModal()
  return (
    <>
      <Button medium onClick={open}>Open Modal</Button>
      <Modal.Modal active={active} onClickOutside={close}>
        <Modal.Body>
          <Modal.Header>
            <Modal.Title>Modal</Modal.Title>
            <Modal.Subtitle>
              This is a modal.
            </Modal.Subtitle>
          </Modal.Header>
          <Text noMargin>Some content contained within the modal.</Text>
        </Modal.Body>
        <Modal.Actions>
          <Modal.Action onClick={close}>
            Cancel
          </Modal.Action>
          <Modal.Action onClick={close} disabled>
            Submit
          </Modal.Action>
        </Modal.Actions>
      </Modal.Modal>
    </>
  )
}

() => {
  const [active, open, close] = useModal()
  const submit = useCallback(() => {
    alert('You submitted the modal!')
    close()
  }, [])
  return (
    <>
      <Button medium onClick={open}>Open Modal</Button>
      <Modal.Modal
        active={active}
        onClickOutside={close}
        onEnterKeyPress={submit}
      >
        <Modal.Body>
          <Modal.Header>
            <Modal.Title>Modal</Modal.Title>
            <Modal.Subtitle>
              This is a modal.
            </Modal.Subtitle>
          </Modal.Header>
          <Text noMargin>Some content contained within the modal.</Text>
        </Modal.Body>
        <Modal.Actions>
          <Modal.Action onClick={close}>
            Cancel
          </Modal.Action>
          <Modal.Action onClick={submit}>
            Submit
          </Modal.Action>
        </Modal.Actions>
      </Modal.Modal>
    </>
  )
}