130 lines
2.8 KiB
React
130 lines
2.8 KiB
React
// Components
|
|
import { Box, Stack, Typography, Button } from "@mui/material";
|
|
import Image from "../../../../../Components/Image";
|
|
import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
|
|
|
|
//Utils
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useLocation } from "react-router-dom";
|
|
import PropTypes from "prop-types";
|
|
|
|
const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, url, type }) => {
|
|
const theme = useTheme();
|
|
const location = useLocation();
|
|
const currentPath = location.pathname;
|
|
const navigate = useNavigate();
|
|
|
|
if (currentPath.startsWith("/status/uptime/public")) {
|
|
return null;
|
|
}
|
|
|
|
if (currentPath.startsWith("/status/distributed/public")) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(2)}
|
|
>
|
|
<Box>
|
|
<Button
|
|
variant="contained"
|
|
color="error"
|
|
onClick={() => setIsDeleteOpen(!isDeleteOpen)}
|
|
loading={isDeleting}
|
|
>
|
|
Delete
|
|
</Button>
|
|
</Box>
|
|
<Box>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={() => {
|
|
if (type === "uptime") {
|
|
navigate(`/status/uptime/configure/${url}`);
|
|
} else {
|
|
navigate(`/status/distributed/configure/${url}`);
|
|
}
|
|
}}
|
|
sx={{
|
|
px: theme.spacing(5),
|
|
"& svg": {
|
|
mr: theme.spacing(3),
|
|
"& path": {
|
|
stroke: theme.palette.secondary.contrastText,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<SettingsIcon /> Configure
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
Controls.propTypes = {
|
|
type: PropTypes.string,
|
|
isDeleting: PropTypes.bool,
|
|
url: PropTypes.string,
|
|
isDeleteOpen: PropTypes.bool.isRequired,
|
|
setIsDeleteOpen: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const ControlsHeader = ({
|
|
statusPage,
|
|
isDeleting,
|
|
isDeleteOpen,
|
|
setIsDeleteOpen,
|
|
url,
|
|
type = "uptime",
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Stack
|
|
alignSelf="flex-start"
|
|
direction="row"
|
|
width="100%"
|
|
gap={theme.spacing(2)}
|
|
justifyContent="space-between"
|
|
alignItems="flex-end"
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(8)}
|
|
alignItems="flex-end"
|
|
>
|
|
<Image
|
|
shouldRender={statusPage?.logo?.data ? true : false}
|
|
alt={"Company logo"}
|
|
maxWidth={"300px"}
|
|
base64={statusPage?.logo?.data}
|
|
/>
|
|
<Typography variant="h2">{statusPage?.companyName}</Typography>
|
|
</Stack>
|
|
<Controls
|
|
isDeleting={isDeleting}
|
|
isDeleteOpen={isDeleteOpen}
|
|
setIsDeleteOpen={setIsDeleteOpen}
|
|
url={url}
|
|
type={type}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
ControlsHeader.propTypes = {
|
|
url: PropTypes.string,
|
|
statusPage: PropTypes.object,
|
|
isDeleting: PropTypes.bool,
|
|
isDeleteOpen: PropTypes.bool.isRequired,
|
|
setIsDeleteOpen: PropTypes.func.isRequired,
|
|
type: PropTypes.string,
|
|
};
|
|
|
|
export default ControlsHeader;
|