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
43. 43
44. 44
45. 45

/** @jsxImportSource ../jsx */
import { attr, derived, el, on, prop, signal } from "../ef.js";

import { type Route } from "../route.js";

import css, { cx } from "./top.module.css";
import md from "./top.md";

function demo() {
  const $opened = signal(false);

  return el(
    "label",
    [attr("class", cx.demoLabel)],
    [
      el("input", [
        attr("type", "checkbox"),
        on("input", (ev) => {
          if (!(ev.currentTarget instanceof HTMLInputElement)) {
            return;
          }

          $opened.set(ev.currentTarget.checked);
        }),
      ]),
      derived(() => ($opened.get() ? "Checked" : "Unchecked")),
    ],
  );
}

export const top: Route = {
  content() {
    return (
      <div>
        <h1>ef.js</h1>
        <p class={cx.description}>
          Simple DOM helper for efficient update powered by Signals.
        </p>
        {demo()}
        {el("div", [prop("innerHTML", md)])}
      </div>
    );
  },
  head: [el("style", [], [css])],
};