import { render } from 'pota'
import { bind } from 'pota/use/bind'
function App() { const input = bind('email@example.net') const select = bind('1') const checkbox = bind(true)
const radio = bind(2)
const contentEditable = bind('editable')
return (
<main>
<section>
<input name="email" use:bind={input} /> email:{' '} {input} <button
on:click={() => input('email2@example.net')} >
select email2@example.net
</button>
</section>
<section>
<select use:bind={select}> <option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
select: {select} <button on:click={() => select('3')}> select three
</button>
</section>
<section>
<input type="checkbox" use:bind={checkbox} />{' '} checkbox: {checkbox} <button on:click={() => checkbox(true)}> set checked
</button>
</section>
<section>
<label>
<input
type="radio"
use:bind={radio} name="lala"
value="1"
/>{' '} one{' '} </label>{' '} <label>
<input
type="radio"
use:bind={radio} name="lala"
value="2"
/>{' '} two{' '} </label>
{' - '} radio: {radio} <button on:click={() => radio(2)}> set 2
</button>
</section>
<section>
<label>
<span
contenteditable="true"
use:bind={contentEditable} ></span>
</label>
{' - '} {contentEditable} {' - '} <button on:click={() => contentEditable('')}> clear
</button>
</section>
</main>
)
}