delte header

client/src/Components/v2/common/controls/HeaderMonitorControls.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import { Icon, MonitorStatus } from "@/Components/v2/design-elements";
 import { Button } from "@/Components/v2/inputs";
-import { Settings, Pause, Play, Mail, Bug } from "lucide-react";
+import { Settings, Pause, Play, Mail, Bug, Trash } from "lucide-react";
 
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -9,10 +9,28 @@ import { useTheme } from "@mui/material/styles";
 import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor.js";
+interface BaseHeaderProps {
+	monitor: Monitor;
+}
+
+const BaseHeader = ({ monitor, children }: React.PropsWithChildren<BaseHeaderProps>) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			spacing={{ xs: theme.spacing(8), md: 0 }}
+			direction={{ xs: "column", md: "row" }}
+			alignItems={"center"}
+			justifyContent={"space-between"}
+		>
+			<MonitorStatus monitor={monitor} />
+			{children}
+		</Stack>
+	);
+};
 
 interface HeaderMonitorControlsProps {
 	path: string;
-	monitor?: Monitor;
+	monitor?: Monitor | null;
 	isAdmin: boolean;
 	refetch: Function;
 }
@@ -36,13 +54,7 @@ export const HeaderMonitorControls = ({
 		return null;
 	}
 	return (
-		<Stack
-			spacing={{ xs: theme.spacing(8), md: 0 }}
-			direction={{ xs: "column", md: "row" }}
-			alignItems={"center"}
-			justifyContent={"space-between"}
-		>
-			<MonitorStatus monitor={monitor} />
+		<BaseHeader monitor={monitor}>
 			<Stack
 				width={{ xs: "100%", md: "auto" }}
 				direction={{ xs: "column", md: "row" }}
@@ -97,6 +109,67 @@ export const HeaderMonitorControls = ({
 					</Button>
 				)}
 			</Stack>
-		</Stack>
+		</BaseHeader>
+	);
+};
+
+interface HeaderDeleteControlsProps {
+	monitor?: Monitor | null;
+	isAdmin: boolean;
+	refetch: Function;
+}
+
+export const HeaderDeleteControls = ({
+	monitor,
+	isAdmin,
+	refetch,
+}: HeaderDeleteControlsProps) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const theme = useTheme();
+	const {
+		post,
+		loading: isPosting,
+		// error: postError,
+	} = usePost<any, Monitor>();
+
+	if (!monitor) {
+		return null;
+	}
+	return (
+		<BaseHeader monitor={monitor}>
+			<Stack
+				width={{ xs: "100%", md: "auto" }}
+				direction={{ xs: "column", md: "row" }}
+				gap={theme.spacing(2)}
+			>
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						loading={isPosting}
+						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						onClick={async () => {
+							await post(`/monitors/pause/${monitor.id}`, {});
+							await refetch();
+						}}
+					>
+						{monitor?.isActive ? t("pause") : t("resume")}
+					</Button>
+				)}
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="error"
+						startIcon={<Icon icon={Trash} />}
+						onClick={() => {
+							console.log("delete");
+						}}
+					>
+						{t("common.buttons.delete")}
+					</Button>
+				)}
+			</Stack>
+		</BaseHeader>
 	);
 };