Prompt Modal

import { PromptModal, usePromptModal } from '@cerberus/react'

function SomeFeature() {
  const prompt = usePromptModal()
  const [userValue, setUserValue] = useState<string | null>(null)

  const handleClick = useCallback(async () => {
    const key = 'SUPER_SECRET'
    const userPrompt = await prompt.show({
      heading: 'Enter passkey',
      description:
        'In order to view the super secret stuff you need to enter your passkey.',
      key,
      actionText: 'Copy passkey',
      cancelText: NOPE,
    })
    if (userPrompt === key) setUserValue('Super secret stuff')
  }, [prompt])

  return (
    <Button onClick={handleClick}>View passkey</Button>
  )
}

function SomePage() {
  return(
    <PromptModal>
      <SomeFeature />
    </PromptModal>
  )
}

import { PromptModal, usePromptModal } from '@cerberus/react'

function SomeFeature() {
  const prompt = usePromptModal()
  const [userValue, setUserValue] = useState<string | null>(null)

  const handleClick = useCallback(async () => {
    const key = 'DELETE'
    const userConsent = await prompt.show({
      kind: 'destructive',
      heading: 'Remove payment method?',
      description: 'This is a permanent action and cannot be undone.',
      key,
      actionText: 'Yes, delete',
      cancelText: NOPE,
    })
    if (userConsent === key) setUserValue('Payment method removed')
  }, [prompt])

  return (
    <Button palette="danger" onClick={handleClick}>Delete card</Button>
  )
}

function SomePage() {
  return(
    <PromptModal>
      <SomeFeature />
    </PromptModal>
  )
}