TextConfirmModalWithCancelButton() — supabase Function Reference

Source Code

apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx lines 8–44

const TextConfirmModalWithCancelButton = () => {
  const [visible, setVisible] = useState(false)
  const [loading, setLoading] = useState(false)

  function onVisibleChange() {
    setVisible(!visible)
  }

  function onSubmit() {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      setVisible(false)
      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
    }, 3000)
  }

  return (
    <>
      <Button type="danger" onClick={onVisibleChange}>
        Show Text Confirm Dialog
      </Button>
      <TextConfirmModal
        key="withCancelButton"
        confirmString="project name"
        visible={visible}
        variant="destructive"
        title="Are you sure you want to delete?"
        blockDeleteButton={false}
        onCancel={onVisibleChange}
        loading={loading}
        confirmPlaceholder='Type "project name" to confirm'
        onConfirm={onSubmit}
      />
    </>
  )
}