export const data = {
  open: false,
};

export default () => (
  <main>
    <Button onClick={() => (data.open = true)}>Open dialog</Button>

    <Portal to="body">
      {data.open && (
        <dialog open class="rounded p-6 shadow-xl">
          <p>This dialog renders outside the main content.</p>
          <Button onClick={() => (data.open = false)}>Close</Button>
        </dialog>
      )}
    </Portal>
  </main>
);