Refactor pagespeed page

Client/src/Components/CreateMonitorHeader/index.jsx

@@ -0,0 +1,33 @@
+import { Stack, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
+import SkeletonLayout from "./skeleton";
+
+const CreateMonitorHeader = ({ isAdmin, shouldRender, path }) => {
+	const navigate = useNavigate();
+	if (!isAdmin) return null;
+	if (!shouldRender) return <SkeletonLayout />;
+	return (
+		<Stack
+			direction="row"
+			justifyContent="end"
+			alignItems="center"
+		>
+			<Button
+				variant="contained"
+				color="accent"
+				onClick={() => navigate(path)}
+			>
+				Create new
+			</Button>
+		</Stack>
+	);
+};
+
+export default CreateMonitorHeader;
+
+CreateMonitorHeader.propTypes = {
+	isAdmin: PropTypes.bool.isRequired,
+	shouldRender: PropTypes.bool.isRequired,
+	path: PropTypes.string.isRequired,
+};

Client/src/Components/CreateMonitorHeader/skeleton.jsx

@@ -0,0 +1,19 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="end"
+			alignItems="center"
+		>
+			<Skeleton
+				variant="rectangular"
+				width={100}
+				height={36}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;

Client/src/Components/MonitorCountHeader/index.jsx

@@ -0,0 +1,40 @@
+import { Stack } from "@mui/material";
+import { Heading } from "../Heading";
+import CircularCount from "../CircularCount";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton";
+
+const MonitorCountHeader = ({
+	shouldRender = true,
+	monitorCount,
+	heading,
+	sx,
+	children,
+}) => {
+	const theme = useTheme();
+	if (!shouldRender) return <SkeletonLayout />;
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(2)}
+			sx={{ ...sx }}
+		>
+			<Heading component="h2">{heading}</Heading>
+			<CircularCount count={monitorCount} />
+			{children}
+		</Stack>
+	);
+};
+
+MonitorCountHeader.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitorCount: PropTypes.number,
+	heading: PropTypes.string,
+	children: PropTypes.node,
+	sx: PropTypes.object,
+};
+
+export default MonitorCountHeader;

Client/src/Components/MonitorCountHeader/skeleton.jsx

@@ -0,0 +1,26 @@
+import { Stack, Skeleton } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const SkeletonLayout = () => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(2)}
+		>
+			<Skeleton
+				variant="text"
+				width={100}
+				height={32}
+			/>
+			<Skeleton
+				variant="circular"
+				width={40}
+				height={40}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;