minecluster/src/components/servers/RconDialog.jsx

import { useState } 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("md"));

  return (
    <Dialog
      fullWidth
      maxWidth="lg"
      open={open}
      fullScreen={fullScreen}
      PaperProps={!fullScreen ? { sx: { height: "60%" } } : undefined}
    >
      <Toolbar sx={{ display: { md: "none" } }} />
      <DialogTitle>RCON - {serverName}</DialogTitle>
      <DialogContent sx={{ height: "100%" }}>
        <RconView serverId={serverId} />
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={dialogToggle}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}