export const data = {
  open: false,
};

export const refs = {
  panel: element<HTMLElement>(),
};

export const open = async () => {
  data.open = true;
  await nextView();
  refs.panel.focus();
};

export default () => (
  <main class="space-y-3">
    <Button onClick={open}>Open</Button>
    {data.open && (
      <section ref={refs.panel} tabindex={-1}>
        Notice
      </section>
    )}
  </main>
);