FlowUI Counter Example

import {
  VStack, HStack, Text, Button,
  State, mount, Color, Font
} from '@notswssr/flowui';

function Counter() {
  const count = new State(0);

  return VStack(
    Text("Counter")
      .font(Font.headline())
      .padding("bottom", 20),

    HStack(
      Button("-")
        .onTap(() => count.value--)
        .padding(10),

      Text("0")
        .bind(count, (value, component) => {
          component.text(value.toString());
        })
        .padding("horizontal", 20)
        .font(Font.title()),

      Button("+")
        .onTap(() => count.value++)
        .padding(10)
    )
    .padding("bottom", 20),

    Text("Current count: 0")
      .bind(count, (value, component) => {
        component.text(`Current count: ${value}`);
      })
  )
  .padding(20)
  .backgroundColor(Color.gray.opacity(0.1))
  .cornerRadius(10);
}

mount(Counter(), "#app");