list gems recipe

list-gems.ts

import { recipe, lift, UI, NAME, ID, handler } from "@commontools/common-builder";
import { dataGems } from "../data.js";
import { html } from "@commontools/common-html";

const getGems = lift(({ count }) => dataGems.get());

const inc = handler<{}, { count: number }>((_, state) => {
    state.count += 1;
});

export const listGems = recipe<{ count: number }>("list gems", ({ count }) => {
    count.setDefault(0);
    const gems = getGems({ count });

    return {
        [UI]: html`
      <div>
        <h2>Current Gems</h2>
        <ul>
          ${gems.map(
            (gem) =>
                html`<li>
                ID: ${gem[ID]}, Name: ${gem[NAME] || "N/A"}
              </li>`
        )}
        </ul>
        <common-button onclick=${inc({ count })}>refresh</common-button>
      </div>
    `,
        [NAME]: "List of Current Gems",
    };
});