/** @jsx h */
/** @jsxFrag Fragment */
import { Fragment, h, render } from "https://esm.sh/preact@10.6.4";
import { useState, useCallback } from "https://esm.sh/preact@10.6.4/hooks";


const App = () => {
  const [count, setCount] = useState(0);
  const countUp = useCallback(() => setCount(count + 1), [count]);
  const countDown = useCallback(() => setCount(count - 1), [count]);
  
  return (
    <div style="position: fixed; top:60px; left: 50%; transform: translate(-50%, 0); background-color: var(--page-bg, #fefefe); border: solid 1px rgba(0,0,0,.15); border-radius: 4px;">
      Counter: {count}<br />
      <span style="user-select: none;" onClick={countUp}>+</span>
      <span style="user-select: none;" onClick={countDown}>-</span>
    </div>
  );
};

const div = document.createElement("div");
document.body.append(div);
render(<App />, div);