link-stack/apps/link/app/_components/OpenSearchWrapper.tsx

"use client";

import { FC } from "react";
import Iframe from "react-iframe";
import { Box } from "@mui/material";

interface OpenSearchWrapperProps {
  url: string;
  margin?: number;
}

export const OpenSearchWrapper: FC<OpenSearchWrapperProps> = ({
  url,
  margin = 50,
}) => (
  <Box sx={{ position: "relative", marginTop: "-100px" }}>
    <Box
      sx={{
        width: "100%",
        height: "100px",
        marginTop: "-20px",
        backgroundColor: "white",
        zIndex: 100,
        position: "relative",
      }}
    />
    <Box
      sx={{
        marginTop: `-${margin}px`,
        zIndex: 1,
        position: "relative",
        height: `calc(100vh + ${margin}px)`,
      }}
    >
      <Iframe
        id="opensearch"
        url={`/link/dashboards/${url}`}
        width="100%"
        height="100%"
        frameBorder={0}
      />
    </Box>
  </Box>
);