extract server

src/Components/MonitorStatusHeader/ConfigButton/index.jsx

@@ -0,0 +1,41 @@
+import { Button, Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
+import PropTypes from "prop-types";
+const ConfigButton = ({ shouldRender = true, monitorId, path }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+
+	if (!shouldRender) return null;
+
+	return (
+		<Box alignSelf="flex-end">
+			<Button
+				variant="contained"
+				color="secondary"
+				onClick={() => navigate(`/${path}/configure/${monitorId}`)}
+				sx={{
+					px: theme.spacing(5),
+					"& svg": {
+						mr: theme.spacing(3),
+						"& path": {
+							/* Should always be contrastText for the button color */
+							stroke: theme.palette.secondary.contrastText,
+						},
+					},
+				}}
+			>
+				<SettingsIcon /> Configure
+			</Button>
+		</Box>
+	);
+};
+
+ConfigButton.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitorId: PropTypes.string.isRequired,
+	path: PropTypes.string.isRequired,
+};
+
+export default ConfigButton;

src/Components/MonitorStatusHeader/index.jsx

@@ -0,0 +1,56 @@
+import { Stack, Typography } from "@mui/material";
+import PulseDot from "../Animated/PulseDot";
+import Dot from "../Dot";
+import { useTheme } from "@emotion/react";
+import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
+import { formatDurationRounded } from "../../Utils/timeUtils";
+import ConfigButton from "./ConfigButton";
+import SkeletonLayout from "./skeleton";
+import PropTypes from "prop-types";
+
+const MonitorStatusHeader = ({ path, shouldRender = true, isAdmin, monitor }) => {
+	const theme = useTheme();
+	const { statusColor, statusMsg, determineState } = useUtils();
+	if (!shouldRender) {
+		return <SkeletonLayout />;
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Stack>
+				<Typography variant="h1">{monitor?.name}</Typography>
+				<Stack
+					direction="row"
+					alignItems={"center"}
+					gap={theme.spacing(2)}
+				>
+					<PulseDot color={statusColor[determineState(monitor)]} />
+					<Typography variant="h2">
+						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
+					</Typography>
+					<Dot />
+					<Typography>
+						Checking every {formatDurationRounded(monitor?.interval)}.
+					</Typography>
+				</Stack>
+			</Stack>
+			<ConfigButton
+				path={path}
+				shouldRender={isAdmin}
+				monitorId={monitor?._id}
+			/>
+		</Stack>
+	);
+};
+
+MonitorStatusHeader.propTypes = {
+	path: PropTypes.string.isRequired,
+	shouldRender: PropTypes.bool,
+	isAdmin: PropTypes.bool,
+	monitor: PropTypes.object,
+};
+
+export default MonitorStatusHeader;

src/Components/MonitorStatusHeader/skeleton.jsx

@@ -0,0 +1,23 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;