stort/src/components/Generic/FloatingDialog.tsx

import { Close, UnfoldLess, UnfoldMore } from "@mui/icons-material";
import { Box, IconButton, Modal, Tooltip, Typography } from "@mui/material";
import { FC, ReactNode } from "react";
import { useSettings } from "../../contexts/SettingsContext";

interface FloatingDialog {
  actionButtons?: ReactNode;
  body: ReactNode;
  bottomBar?: ReactNode;
  close: () => void;
  maximisedState: boolean;
  openButton: ReactNode;
  openState: boolean;
  setMaximisedState: (state: boolean) => void;
  title: string;
  sx?: any;
}

export const FloatingDialog: FC<FloatingDialog> = ({
  actionButtons,
  body,
  bottomBar,
  close,
  maximisedState,
  openButton,
  openState,
  setMaximisedState,
  title,
  sx,
}) => {
  const { settings } = useSettings();

  return (
    <>
      {openButton}

      <Modal
        onClose={close}
        open={openState}
      >
        <Box
          sx={{
            bgcolor: "background.paper",
            borderRadius: maximisedState ? "0px" : settings.style.radius + "px",
            display: "flex",
            flexDirection: "column",
            height: maximisedState ? "100%" : settings.style.window_height + "%",
            left: "50%",
            maxHeight: maximisedState ? "100vh" : "96vh",
            maxWidth: maximisedState ? "100vw" : "96vw",
            p: 2,
            position: "absolute" as "absolute",
            top: "50%",
            transform: "translate(-50%, -50%)",
            transition: "all ease-in-out",
            transitionDuration: settings.style.transition_duration + "ms",
            width: maximisedState ? "100vw" : settings.style.window_width + "px",
          }}
        >
          <Box
            sx={{
              alignItems: "center",
              display: "flex",
              px: 1,
            }}
          >
            <Typography variant="h6">{title}</Typography>
            <Box sx={{ flexGrow: 1 }} />

            {actionButtons}

            <Tooltip title={maximisedState ? "Minimise" : "Maximise"}>
              <IconButton
                onClick={() => {
                  setMaximisedState(!maximisedState);
                }}
                sx={{
                  mr: 1,
                }}
              >
                {maximisedState ? <UnfoldLess /> : <UnfoldMore />}
              </IconButton>
            </Tooltip>
            <Tooltip title="Close">
              <IconButton onClick={close}>
                <Close />
              </IconButton>
            </Tooltip>
          </Box>
          {body}
          {bottomBar}
        </Box>
      </Modal>
    </>
  );
};