import { useAsyncCallback } from '@dawnlabs/tacklebox'

function MyAsyncButton(props) {
  const [onClick, { loading, error, data }] = useAsyncCallback(props.onClick)

  return (
    <>
      {error && <span>{error}!</span>}
      <button onClick={onClick}>{loading ? 'Saving...' : 'Save'}</button>
      {data && <span>Success! {data}</span>}
    </>
  )
}

import { useKeyboardListener } from '@dawnlabs/tacklebox'

function Modal(props) {
  useKeyboardListener('Escape', props.onClose)

  return <div>Hello World</div>
}

import { useTempValue } from '@dawnlabs/tacklebox'

function MyForm(props) {
  const initialName = props.name
  const { hasChanged, value, onInputChange, submit, reset } = useTempValue(initialName)

  return (
    <form onSubmit={e => e.preventDefault()}>
      <input value={value || ''} onChange={onInputChange} />
      <button disabled={!hasChanged} onClick={submit}>
        Submit
      </button>
      <button disabled={!hasChanged} onClick={reset}>
        Cancel
      </button>
    </form>
  )
}

import { useCopyTextHandler } from '@dawnlabs/tacklebox'

const interval = 2 * 1000 // 2 seconds

function MyCopyButton() {
  const { onClick, copied } = useCopyTextHandler('https://github.com/dawnlabs/tacklebox', {
    interval
  })

  return <button onClick={onClick}>{copied ? 'COPIED!' : 'Copy URL'}</button>
}

import { useOnline } from '@dawnlabs/tacklebox'

function MyComponent() {
  const online = useOnline()
  return <span>You are {online ? 'online' : 'offline'}</span>
}

import {Modal} from '@dawnlabs/tacklebox'

<Modal open={this.state.open} onClickAway={() => this.setState({ open: false})}>
  <form>
    <input placeholder="Enter name here . . ." />
  </form>
</>