Embedding the console

import { useEffect, useRef } from "react";

export function Dashboard({
  deploymentUrl,
  deploymentName,
  deployKey,
  visiblePages,
}: {
  deploymentUrl: string;
  deploymentName: string;
  deployKey: string;
  visiblePages?: string[];
}) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      // We first wait for the iframe to send a dashboard-credentials-request message.
      // This makes sure that we don't send the credentials until the iframe is ready.
      if (event.data?.type !== "dashboard-credentials-request") {
        return;
      }
      iframeRef.current?.contentWindow?.postMessage(
        {
          type: "dashboard-credentials",
          adminKey: deployKey,
          deploymentUrl,
          deploymentName,
          // Optional: specify which pages to show
          visiblePages,
        },
        "*",
      );
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [deploymentUrl, adminKey, deploymentName, visiblePages]);

  return (
    <iframe
      ref={iframeRef}
      // You can also default on other pages, for instance /functions, /files or /logs
      src="https://console.bijection.com/data"
      allow="clipboard-write"
    />
  );
}