From 4820c1ee8a4fd1a92ac5847a8d8bc5ec6238405b Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Sat, 1 Mar 2025 21:56:21 +0530
Subject: [PATCH] FIX-1848 made changes in the contents tab in the status page.

---
 .../Create/Components/Tabs/Content.jsx        | 31 ++++++++-----------
 .../Create/Components/Tabs/SectionStack.jsx   | 22 +++++++++++++
 2 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx

diff --git a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx
index 8eda4fe0a..6adf3cca9 100644
--- a/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx
+++ b/src/Pages/StatusPage/Create/Components/Tabs/Content.jsx
@@ -1,13 +1,13 @@
 // Components
-import { Stack, Typography, Button } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { TabPanel } from "@mui/lab";
-import ConfigBox from "../../../../../Components/ConfigBox";
 import MonitorList from "../MonitorList";
 import Search from "../../../../../Components/Inputs/Search";
 import Checkbox from "../../../../../Components/Inputs/Checkbox";
 // Utils
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
+import SectionStack from "./SectionStack";
 const Content = ({
 	tabValue,
 	form,
@@ -34,14 +34,10 @@ const Content = ({
 	return (
 		<TabPanel value={tabValue}>
 			<Stack gap={theme.spacing(10)}>
-				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="h2">Status page servers</Typography>
-						<Typography component="p">
-							You can add any number of servers that you monitor to your status page. You
-							can also reorder them for the best viewing experience.
-						</Typography>
-					</Stack>
+				<SectionStack
+					title="Status page servers"
+					description="You can add any number of servers that you monitor to your status page. You can also reorder them for the best viewing experience."
+				>
 					<Stack>
 						<Stack
 							direction="row"
@@ -72,13 +68,12 @@ const Content = ({
 							setSelectedMonitors={handleMonitorsChange}
 						/>
 					</Stack>
-				</ConfigBox>{" "}
-				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="h2">Features</Typography>
-						<Typography component="p">Show more details on the status page</Typography>
-					</Stack>
-					<Stack sx={{ margin: theme.spacing(6) }}>
+				</SectionStack>
+				<SectionStack
+					title="Features"
+					description="Show more details on the status page"
+				>
+					<Stack>
 						<Checkbox
 							id="showCharts"
 							name="showCharts"
@@ -94,7 +89,7 @@ const Content = ({
 							onChange={handleFormChange}
 						/>
 					</Stack>
-				</ConfigBox>
+				</SectionStack>
 			</Stack>
 			<Stack gap={theme.spacing(6)}></Stack>
 		</TabPanel>
diff --git a/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx
new file mode 100644
index 000000000..2eacf5ea5
--- /dev/null
+++ b/src/Pages/StatusPage/Create/Components/Tabs/SectionStack.jsx
@@ -0,0 +1,22 @@
+import { Stack, Typography } from "@mui/material";
+import ConfigBox from "../../../../../Components/ConfigBox";
+import PropTypes from "prop-types";
+
+// This can be used to add any extra/additional section/stacks on top of existing sections on the tab
+const SectionStack = ({ title, description, children }) => (
+	<ConfigBox>
+		<Stack gap={2}>
+			<Typography component="h2">{title}</Typography>
+			<Typography component="p">{description}</Typography>
+		</Stack>
+		{children}
+	</ConfigBox>
+);
+
+SectionStack.propTypes = {
+	title: PropTypes.string.isRequired, // Title must be a string and is required
+	description: PropTypes.string.isRequired, // Description must be a string and is required
+	children: PropTypes.node.isRequired,
+};
+
+export default SectionStack;