so://phie

blob: a3857f8a44d0704a0bcfa0444b4052b4a553f1d4 (1090 bytes)[doc][blame][raw]

 1<div id="app"></div>
 2
 3<script type="module">
 4
 5  import {useState, createElement} from 'https://cdn.skypack.dev/react';
 6  import {render} from 'https://cdn.skypack.dev/react-dom';
 7  import {segment, html, css} from '../segment.js';
 8
 9  const Counter = () => {
10    const [count, setCount] = useState(0);
11
12    const style = css`
13      .counter {
14        display: inline-flex;
15        align-items: center;
16        gap: 10px;
17        padding: 50px;
18      }
19  
20      .counter p {
21        width: 30px;
22        margin: 0px;
23        text-align: center;
24        font-family: monospace;
25        font-size: 16px;
26      }
27      
28      .counter button {
29        width: 32px;
30        height: 32px;
31        cursor: pointer;
32      }
33    `;
34
35    return html`
36      <div class="counter">
37        ${style}
38        <button @click="${() => setCount(count - 1)}">-</button>
39        <p>${count}</p>
40        <button @click="${() => setCount(count + 1)}">+</button>
41      </div>
42    `;
43  }
44  
45  const app = document.querySelector('#app');
46  segment({createElement});
47  render(createElement(Counter), app);
48
49</script>