Feature release for uptime monitors.

client/src/Components/MonitorCreateHeader/index.jsx

@@ -2,21 +2,29 @@ import { Stack, Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import SkeletonLayout from "./skeleton";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@emotion/react";
 
 const CreateMonitorHeader = ({
 	isAdmin,
 	label = "Create new",
 	shouldRender = true,
 	path,
+	bulkPath,
 }) => {
 	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const theme = useTheme();
+
 	if (!isAdmin) return null;
 	if (!shouldRender) return <SkeletonLayout />;
+
 	return (
 		<Stack
 			direction="row"
 			justifyContent="end"
 			alignItems="center"
+			gap={theme.spacing(6)}
 		>
 			<Button
 				variant="contained"
@@ -25,6 +33,17 @@ const CreateMonitorHeader = ({
 			>
 				{label}
 			</Button>
+			{bulkPath && (
+				<Button
+					variant="contained"
+					color="accent"
+					onClick={() => {
+						navigate(`${bulkPath}`);
+					}}
+				>
+					{t("bulkImport.title")}
+				</Button>
+			)}
 		</Stack>
 	);
 };
@@ -36,4 +55,5 @@ CreateMonitorHeader.propTypes = {
 	shouldRender: PropTypes.bool,
 	path: PropTypes.string.isRequired,
 	label: PropTypes.string,
+	bulkPath: PropTypes.string,
 };