1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42

import { derived, signal } from "../../src/ef.js";

import { type JSXChildren } from "./jsx/jsx.js";

interface CounterProps {
  initialValue?: number;

  children: JSXChildren;
}

function Counter({ initialValue = 0, children }: CounterProps) {
  const $count = signal(initialValue);

  // `class` is attribute, `disabled` is property
  return (
    <div class="counter">
      <p class="counter-label">{children}</p>
      <button
        class="counter-button"
        disabled={derived(() => $count.get() <= 0)}
        onClick={() => $count.set($count.once() - 1)}
      >
        -
      </button>
      <span>{derived(() => $count.get().toString(10))}</span>
      <button
        class="counter-button"
        disabled={derived(() => $count.get() >= 10)}
        onClick={() => $count.set($count.once() + 1)}
      >
        +
      </button>
    </div>
  );
}

document.body.appendChild(
  <div class="root">
    <Counter>Counter 1</Counter>
    <Counter initialValue={5}>Counter 2</Counter>
  </div>,
);