From db0c1ad4a4173871a76fba26d40e3a3b2d6f3326 Mon Sep 17 00:00:00 2001
From: tunckiral <tunc.kiral@gmail.com>
Date: Sat, 22 Feb 2025 15:44:05 -0500
Subject: [PATCH] replace Greeting component with SubHeader for improved layout
 and functionality

---
 .../Details/Components/Subheader/index.jsx    | 71 +++++++++++++++++++
 .../Status/Components/Subheader/index.jsx     | 55 --------------
 .../DistributedUptimeStatus/Status/index.jsx  | 14 +++-
 3 files changed, 83 insertions(+), 57 deletions(-)
 create mode 100644 src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
 delete mode 100644 src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx

diff --git a/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx b/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
new file mode 100644
index 000000000..76eb94bb9
--- /dev/null
+++ b/src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx
@@ -0,0 +1,71 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import { RowContainer } from "../../../../../Components/StandardContainer";
+
+/**
+
+ *
+ * @component
+ * @example
+ *
+ * @param {Object} props
+ * @param {string} props.type - The type of monitor to be displayed in the message
+ * @returns {JSX.Element} The rendered component
+ */
+
+const SubHeader = ({ headerText='', subHeaderText='', rightCatagoryTitle='',rightDescription=''  }) => {
+	const theme = useTheme();
+	
+	return (
+		<Stack 
+			direction="row" 
+			justifyContent="space-between"
+			>
+			<Stack 
+				direction={"column"}
+			>
+				<Typography
+					component="h1"
+					variant="h1"
+					mb={theme.spacing(1)}
+				>
+					<Typography
+						component="span"
+						fontSize="inherit"
+						color={theme.palette.primary.contrastTextTertiary}
+					>
+						{headerText}
+					</Typography>
+				</Typography>
+				<Typography
+					variant="body2"
+					lineHeight={1}
+					color={theme.palette.primary.contrastTextTertiary}
+				>
+					{subHeaderText}
+				</Typography>
+			</Stack>
+			
+			{rightCatagoryTitle &&
+			<RowContainer sx={{ width: "20%" }}>
+				<Stack>
+					<Typography variant={`body2`}>{rightCatagoryTitle}</Typography>
+					<Typography variant={`h2`}>
+						{rightDescription}
+					</Typography>
+				</Stack>
+			</RowContainer>
+			}
+
+
+
+		</Stack>
+	);
+};
+
+SubHeader.propTypes = {
+	type: PropTypes.string,
+};
+
+export default SubHeader;
diff --git a/src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx b/src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx
deleted file mode 100644
index 8a327f0fa..000000000
--- a/src/Pages/DistributedUptimeStatus/Status/Components/Subheader/index.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from "prop-types";
-import { useTheme } from "@emotion/react";
-import { Box, Typography } from "@mui/material";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect } from "react";
-import { setGreeting } from "../Features/UI/uiSlice";
-
-
-
-/**
-
- *
- * @component
- * @example
- *
- * @param {Object} props
- * @param {string} props.type - The type of monitor to be displayed in the message
- * @returns {JSX.Element} The rendered component
- */
-
-const Greeting = ({ type = "" }) => {
-	const theme = useTheme();
-	const dispatch = useDispatch();
-
-	return (
-		<Box>
-			<Typography
-				component="h1"
-				variant="h1"
-				mb={theme.spacing(1)}
-			>
-				<Typography
-					component="span"
-					fontSize="inherit"
-					color={theme.palette.primary.contrastTextTertiary}
-				>
-					Real-time, real-device coverage
-				</Typography>
-			</Typography>
-			<Typography
-				variant="h2"
-				lineHeight={1}
-				color={theme.palette.primary.contrastTextTertiary}
-			>
-				Powered by millions of devices worldwide, view a system's performance by global region, country or city.
-			</Typography>
-		</Box>
-	);
-};
-
-Greeting.propTypes = {
-	type: PropTypes.string,
-};
-
-export default Greeting;
diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx
index a1c6b473f..fc3043eda 100644
--- a/src/Pages/DistributedUptimeStatus/Status/index.jsx
+++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx
@@ -24,8 +24,10 @@ import { useParams } from "react-router-dom";
 import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
 import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl";
 import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
+
 import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
+import SubHeader from "../../DistributedUptime/Details/Components/Subheader";
 const DistributedUptimeStatus = () => {
 	const { url } = useParams();
 	const location = useLocation();
@@ -153,13 +155,21 @@ const DistributedUptimeStatus = () => {
 				url={url}
 				type="distributed"
 			/>
-
+		
 			<StatusHeader
 				monitor={monitor}
 				connectionStatus={connectionStatus}
 				elementToCapture={elementToCapture}
 			/>
-
+			
+			
+			
+			<SubHeader 
+				headerText="Real-time, real-device coverage" 
+				subHeaderText="Powered by millions devices worldwide, view a system performance by global region, country or city"
+				rightCatagoryTitle="Monitor"
+					rightDescription = "Mainnet Beta Cluster"
+			/>
 			<NextExpectedCheck
 				lastUpdateTime={monitor?.timeSinceLastCheck ?? 0}
 				interval={monitor?.interval ?? 0}