minecluster/src/components/servers/RconDialog.jsx

import { useState, useEffect } from "react";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Dialog from "@mui/material/Dialog";
import Toolbar from "@mui/material/Toolbar";
import RconView from "./RconView.jsx";

export function useRconDialog(isOpen = false) {
  const [open, setOpen] = useState(isOpen);
  const dialogToggle = () => setOpen(!open);
  return [open, dialogToggle];
}

export default function RconDialog(props) {
  const { server, open, dialogToggle } = props;
  const { name: serverName, id: serverId } = server ?? {};
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <Dialog
      sx={
        fullScreen
          ? {}
          : { "& .mcl-MuiDialog-paper": { width: "80%", maxHeight: 555 } }
      }
      maxWidth="xs"
      open={open}
      fullScreen={fullScreen}
    >
      <Toolbar sx={{ display: { sm: "none" } }} />
      <DialogTitle>RCON - {serverName}</DialogTitle>
      <DialogContent>
        <RconView serverId={serverId} />
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={dialogToggle}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}