initial commit

src/Components/MonitorCreateHeader/index.jsx

@@ -0,0 +1,39 @@
+import { Stack, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
+import SkeletonLayout from "./skeleton";
+
+const CreateMonitorHeader = ({
+	isAdmin,
+	label = "Create new",
+	shouldRender = true,
+	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)}
+			>
+				{label}
+			</Button>
+		</Stack>
+	);
+};
+
+export default CreateMonitorHeader;
+
+CreateMonitorHeader.propTypes = {
+	isAdmin: PropTypes.bool.isRequired,
+	shouldRender: PropTypes.bool,
+	path: PropTypes.string.isRequired,
+	label: PropTypes.string,
+};

src/Components/MonitorCreateHeader/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;