Pagination

{
  "state": {
    "currentPage": { "type": "number", "initial": 1 }
  },
  "actions": [
    { "name": "setPage1", "steps": [{ "do": "set", "target": "currentPage", "value": { "expr": "lit", "value": 1 } }] },
    { "name": "setPage2", "steps": [{ "do": "set", "target": "currentPage", "value": { "expr": "lit", "value": 2 } }] },
    {
      "name": "prevPage",
      "steps": [{
        "do": "set",
        "target": "currentPage",
        "value": {
          "expr": "cond",
          "if": { "expr": "bin", "op": ">", "left": { "expr": "state", "name": "currentPage" }, "right": { "expr": "lit", "value": 1 } },
          "then": { "expr": "bin", "op": "-", "left": { "expr": "state", "name": "currentPage" }, "right": { "expr": "lit", "value": 1 } },
          "else": { "expr": "lit", "value": 1 }
        }
      }]
    },
    {
      "name": "nextPage",
      "steps": [{
        "do": "set",
        "target": "currentPage",
        "value": {
          "expr": "cond",
          "if": { "expr": "bin", "op": "<", "left": { "expr": "state", "name": "currentPage" }, "right": { "expr": "lit", "value": 2 } },
          "then": { "expr": "bin", "op": "+", "left": { "expr": "state", "name": "currentPage" }, "right": { "expr": "lit", "value": 1 } },
          "else": { "expr": "lit", "value": 2 }
        }
      }]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "nav",
    "props": { "aria-label": { "expr": "lit", "value": "Pagination" }, "class": { "expr": "lit", "value": "flex items-center gap-1" } },
    "children": [
      {
        "kind": "element",
        "tag": "button",
        "props": { "class": { "expr": "lit", "value": "h-9 w-9 rounded-md border hover:bg-muted" }, "onClick": { "action": "prevPage" } },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "←" } }]
      },
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "class": {
            "expr": "cond",
            "if": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "currentPage" }, "right": { "expr": "lit", "value": 1 } },
            "then": { "expr": "lit", "value": "h-9 w-9 rounded-md bg-primary text-primary-foreground" },
            "else": { "expr": "lit", "value": "h-9 w-9 rounded-md border hover:bg-muted" }
          },
          "onClick": { "action": "setPage1" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "1" } }]
      },
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "class": {
            "expr": "cond",
            "if": { "expr": "bin", "op": "==", "left": { "expr": "state", "name": "currentPage" }, "right": { "expr": "lit", "value": 2 } },
            "then": { "expr": "lit", "value": "h-9 w-9 rounded-md bg-primary text-primary-foreground" },
            "else": { "expr": "lit", "value": "h-9 w-9 rounded-md border hover:bg-muted" }
          },
          "onClick": { "action": "setPage2" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "2" } }]
      },
      {
        "kind": "element",
        "tag": "button",
        "props": { "class": { "expr": "lit", "value": "h-9 w-9 rounded-md border hover:bg-muted" }, "onClick": { "action": "nextPage" } },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "→" } }]
      }
    ]
  }
}