How to create a custom widget?

[LexSerest]

How to create a custom widget?
To use <ColorPick title="#ccc"/> in the jsx code

import Gtk from "gi://Gtk?version=3.0";
import { execAsync } from "astal";
import Astal from "gi://Astal?version=3.0";

export class ColorPick extends /* What should be here? */ {
  label: Gtk.Widget;
  color: string;

  constructor({ text }: { text: string }) {
    this.label = <label label={text} />;
    this.color = "#fff";
  }

  async pick(e: Astal.ClickEvent) {
    try {
      if (e.button != Astal.MouseButton.PRIMARY) {
        this.color = (await execAsync("hyprpicker")).trim();
        this.label.set_css(`color: ${this.color}`);
      }

      await execAsync(`wl-copy "${this.color}"`);
    } catch (e) {
      print(e);
    }
  }

  render() {
    return <button onClick={(_, e) => this.pick(e)}>{this.label}</button>;
  }
}

[kotontrion]

There is no need to create a new class. The easiest way is to just use function, which return the widget like this:

function ColorPick() {
  const color = Variable("#fff")

  const clicked = async (self: Astal.Button, event: Astal.ClickEvent) => {
    const c = await execAsync("hyprpicker")
    color.set(c);
    execAsync(`wl-copy "${c}"`)
  }

  return (
    <button 
      onClick={clicked}
      css={color().as(c => `color: ${c}`)}>
      {color()}
    </button>
  );
}

//then just use like this:
<ColorPick />

Here are the docs about this.