/// <reference no-default-lib="true" />
/// <reference lib="esnext" />
/// <reference lib="dom" />

import React from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

function ClickMe(
  props: { onClick?: React.MouseEventHandler<HTMLDivElement> },
): JSX.Element {
  return (
    <div
      onClick={props.onClick}
      style={{
        width: 200,
        height: 200,
        backgroundColor: "aqua",
        borderRadius: 10,
      }}
    >
    </div>
  );
}

const root = createRoot(document.body);
root.render(
  <ClickMe onClick={() => alert("クリックしたよ！")}></ClickMe>,
);