refactor: replace SubHeader component with a new implementation and update translations

src/Components/Subheader/index.jsx

@@ -0,0 +1,92 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import { RowContainer } from "../StandardContainer";
+
+/**
+
+ *
+ * @component
+ * @example
+ *
+ * @param {string} props.headerText - Header text
+ * @param {number} props.headerLevel - Font characteristic of the header
+ * @param {string} props.subHeaderText - Subheader text
+ * @param {number} props.subHeaderLevel - Font characteristic of the subheader
+ * @param {string} props.rightCatagoryTitle - Message for right section
+ * @param {number} props.rightCatagoryTitleLevel - Font characteristic of the right section header
+ * @param {string} props.rightDescription - Description for right section
+ * @param {number} props.rightDescriptionLevel - Font characteristic of the right section description
+ * @returns {JSX.Element} The rendered component
+ */
+
+const SubHeader = ({ 
+		headerText='',
+		headerLevel = 1, 
+		subHeaderText = '', 
+		subHeaderLevel = 1 , 
+		rightCatagoryTitle = '',
+		rightCatagoryTitleLevel = 2,
+		rightDescription='', 
+		rightDescriptionLevel = 2
+	}) => {
+	const theme = useTheme();
+	
+	return (
+		<Stack 
+			direction="row" 
+			justifyContent="space-between"
+			>
+			<Stack 
+				direction={"column"}
+			>
+				<Typography
+					component={`h${headerLevel}`}
+					variant={`h${headerLevel}`}
+					mb={theme.spacing(1)}
+				>
+					<Typography
+						component="span"
+						fontSize="inherit"
+						color={theme.palette.primary.contrastTextTertiary}
+					>
+						{headerText}
+					</Typography>
+				</Typography>
+				<Typography
+					variant={`body${subHeaderLevel}`}
+					color={theme.palette.primary.contrastTextTertiary}
+				>
+					{subHeaderText}
+				</Typography>
+			</Stack>
+			
+			{rightCatagoryTitle &&
+				<RowContainer sx={{ width: "20%" }}>
+					<Stack>
+						<Typography variant={`body${rightCatagoryTitleLevel}`}>{rightCatagoryTitle}</Typography>
+						<Typography variant={`h${rightDescriptionLevel}`}>
+							{rightDescription}
+						</Typography>
+					</Stack>
+				</RowContainer>
+			}
+
+
+
+		</Stack>
+	);
+};
+
+SubHeader.propTypes = {
+	headerText:PropTypes.string,
+	headerLevel : PropTypes.number , 
+	subHeaderText :PropTypes.string, 
+	subHeaderLevel : PropTypes.number, 
+	rightCatagoryTitle :PropTypes.string,
+	rightCatagoryTitleLevel : PropTypes.number,
+	rightDescription:PropTypes.string, 
+	rightDescriptionLevel : PropTypes.number
+};
+
+export default SubHeader;

src/Pages/DistributedUptime/Details/Components/Subheader/index.jsx

@@ -1,71 +0,0 @@
-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;

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -25,15 +25,16 @@ 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 TimeFrameHeader from "./Components/TimeframeHeader";
+import SubHeader from "../../../Components/Subheader";
+
+import { useNavigate, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
-import SubHeader from "../../DistributedUptime/Details/Components/Subheader";
 const DistributedUptimeStatus = () => {
 	const { url } = useParams();
 	const location = useLocation();
+	const { t } = useTranslation();
 	const isPublic = location.pathname.startsWith("/status/distributed/public");
 
 	const elementToCapture = useRef(null);
@@ -169,23 +170,24 @@ const DistributedUptimeStatus = () => {
 				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"
+				headerText={t("distributedStatusHeaderText")} 
+				subHeaderText={t("distributedStatusSubHeaderText")}
+				rightCatagoryTitle={t("distributedRightCatagoryTitle")}
+				rightDescription = {t("distributedRightCatagoryDescription")}
 			/>
+
 			<NextExpectedCheck
 				lastUpdateTime={monitor?.timeSinceLastCheck ?? 0}
 				interval={monitor?.interval ?? 0}
 				trigger={lastUpdateTrigger}
 			/>
+
 			<MonitorTimeFrameHeader
 				dateRange={dateRange}
 				setDateRange={setDateRange}
 			/>
+
 			<Stack
 				direction="row"
 				gap={theme.spacing(8)}

src/locales/gb.json

@@ -55,5 +55,9 @@
   "authRegisterCreateAccount": "Create your account to get started",
   "authRegisterCreateSuperAdminAccount": "Create your Super admin account to get started",
   "authRegisterSignUpWithEmail": "Sign up with Email",
-  "authRegisterBySigningUp": "By signing up, you agree to our"
+  "authRegisterBySigningUp": "By signing up, you agree to our",
+  "distributedStatusHeaderText": "Real-time, real-device coverage",
+  "distributedStatusSubHeaderText": "Powered by millions devices worldwide, view a system performance by global region, country or city",
+  "distributedRightCatagoryTitle" : "Monitor",
+  "distributedRightCatagoryDescription" : "Mainnet Beta Cluster"
 }

src/locales/tr.json

@@ -55,5 +55,9 @@
   "authRegisterCreateAccount": "Hesap oluşturmak için devam et",
   "authRegisterCreateSuperAdminAccount": "Super admin hesabınızı oluşturmak için devam edin",
   "authRegisterSignUpWithEmail": "E-posta ile kayıt ol",
-  "authRegisterBySigningUp": "Kayıt olarak, aşağıdaki şartları kabul ediyorsunuz:"
+  "authRegisterBySigningUp": "Kayıt olarak, aşağıdaki şartları kabul ediyorsunuz:",
+  "distributedStatusHeaderText": "Gerçek zamanlı, Gerçek cihazlar kapsamı",
+  "distributedStatusSubHeaderText": "Dünya çapında milyonlarca cihaz tarafından desteklenen sistem performansını küresel bölgeye, ülkeye veya şehre göre görüntüleyin",
+  "distributedRightCatagoryTitle" : "Monitör",
+  "distributedRightCatagoryDescription" : "Mainnet Beta Kümesi"
 }