import { render, signal } from 'pota'import { For, Show } from 'pota/components'
function Example() { const [showing, setShowing] = signal(true)
setInterval(() => setShowing(!showing()), 5_000)
const [value, setValue] = signal([1, 2])
const content = () => value().length + 1
return (
<main>
<section class="buttons">
<Buttons
setValue={setValue} value={value} content={content} />
</section>
<hr />
<section class="testing">
<For each={value}> {(item, index) => { return (
<>
<div class="render">
<b>{item}</b> </div>
<Show when={showing}>e</Show> <br />
</>
)
}}
</For>
</section>
<hr /> simple value
<section>
<For each={value}>{item => item}</For> </section>
<hr />
<section>
should dispose:
<Show when={showing}> <For each={value}> {item => <b class="render">{item}</b>} </For>
</Show>
</section>
<hr />
<section>
BEFORE
<For each={value}> {item => <b class="render">{item}</b>} </For>
AFTER
</section>
<hr />
<section>
<For each={value}> B{item => <b class="render">{item}</b>}A </For>
</section>
<hr />
<section>
<For each={value}> {item => ( <>
<br />
BEFORE
<br />
<Show when={showing}>#0-</Show> <For each={value}> {item => ( <>
<b class="render">{item}</b> </>
)}
</For>
<Show when={showing}>-#N</Show> <br />
AFTER
</>
)}
</For>