link-stack/packages/leafcutter-ui/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,
}) => (
  <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={`/dashboards/${url}`}
        // url={`/dashboards/${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`}
        width="100%"
        height="100%"
        frameBorder={0}
      />
    </Box>
  </Box>
);