widget/Button.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { Variable, bind } from "astal"

type Props = {
  p: string
  child?: JSX.Element
  children?: Array<JSX.Element>
}

export default function MyButton({p, child, children}: Props) {
  const count = Variable(0)
  const labels = [p +"1", p +"2"]

  if (child) {
    console.log(child.label)
  }

  function increment() {
    count.set(count.get() + 1)
  }

  function handleClick(self, ...args) {
    console.log(self, "was clicked")
  }
  return <box>
    {labels.map(label => (
      <button onClick={handleClick}>
        <label label={label}></label>
      </button>
    ))}
    <button onClick={increment}>
      <label label={bind(count).as(num => num.toString())}></label>
    </button>
  </box>
}