memorium/islands/Counter.tsx

import type { Signal } from "@preact/signals";
import { Button } from "@components/Button.tsx";
import { IconCircleMinus, IconCirclePlus } from "@components/icons.tsx";

interface CounterProps {
  count: Signal<number>;
}

export default function Counter(props: CounterProps) {
  props.count.value = Math.max(1, props.count.value);
  return (
    <div class="flex items-center px-1 py-2 rounded-xl">
      <Button
        class=""
        onClick={() => props.count.value -= 1}
      >
        <IconCircleMinus />
      </Button>
      <input
        class="text-3xl bg-transparent inline text-center -mx-4"
        type="number"
        size={props.count.toString().length}
        value={props.count}
        onInput={(ev) => props.count.value = ev.target?.value}
      />
      <Button onClick={() => props.count.value += 1}>
        <IconCirclePlus />
      </Button>
    </div>
  );
}