header create

client/src/Components/v2/common/charts/HeatmapResponseTime.tsx

@@ -2,7 +2,7 @@ import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
 import type { Check } from "@/Types/Check";
 import { getResponseColor } from "@/Utils/DataUtils";
-import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
+import { HeatmapResponseTimeTooltip } from "@/Components/v2/common/charts/HeatmapResponseTimeTooltip";
 import type { SxProps } from "@mui/material/styles";
 import type { ResponsiveStyleValue } from "@mui/system";
 

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

@@ -0,0 +1,33 @@
+import { Stack } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { ButtonInput } from "../../inputs/Button";
+
+interface HeaderCreateProps {
+	label?: string;
+	path: string;
+}
+
+export const HeaderCreate = ({ label = "Create", path }: HeaderCreateProps) => {
+	const navigate = useNavigate();
+
+	const handleClick = () => {
+		navigate(path);
+	};
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="flex-end"
+			alignItems="center"
+			width="100%"
+		>
+			<ButtonInput
+				variant="contained"
+				color="primary"
+				onClick={handleClick}
+			>
+				{label}
+			</ButtonInput>
+		</Stack>
+	);
+};

client/src/Components/v2/common/index.ts

@@ -1,3 +1,4 @@
-export * from "./HistogramResponseTime";
-export * from "./HeatmapResponseTime";
-export * from "./HeatmapResponseTimeTooltip";
+export * from "../common/charts/HistogramResponseTime";
+export * from "../common/charts/HeatmapResponseTime";
+export * from "../common/charts/HeatmapResponseTimeTooltip";
+export * from "../common/controls/HeaderCreate";

client/src/Components/v2/monitors/ControlsFilter.tsx

@@ -10,7 +10,7 @@ const types = ["http", "ping", "port", "docker"];
 const statuses = ["up", "down"];
 const states = ["active", "paused"];
 
-export const FilterControls = ({
+export const ControlsFilter = ({
 	selectedTypes,
 	setSelectedTypes,
 	selectedStatus,

client/src/Components/v2/monitors/index.tsx

@@ -1 +1 @@
-export * from "./FilterControls";
+export * from "./ControlsFilter";

client/src/Pages/Uptime/Monitors/index.tsx

@@ -1,4 +1,4 @@
-import { FilterControls } from "@/Components/v2/monitors";
+import { ControlsFilter } from "@/Components/v2/monitors";
 import {
 	MonitorBasePageWithStates,
 	UpStatusBox,
@@ -131,7 +131,7 @@ const UptimeMonitorsPage = () => {
 				justifyContent={isSmall ? "flex-start" : "space-between"}
 				gap={theme.spacing(4)}
 			>
-				<FilterControls
+				<ControlsFilter
 					selectedTypes={selectedTypes}
 					setSelectedTypes={setSelectedTypes}
 					selectedStatus={selectedStatus}