Merge pull request #21 from uprockcom/status-page-subheader

Status page subheader #3

src/Components/Subheader/index.jsx

@@ -0,0 +1,89 @@
+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/DistributedUptimeStatus/Status/index.jsx

@@ -25,13 +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";
 
 const DistributedUptimeStatus = () => {
 	const { url } = useParams();
 	const location = useLocation();
+	const { t } = useTranslation();
 	const isPublic = location.pathname.startsWith("/status/distributed/public");
 
 	const elementToCapture = useRef(null);
@@ -160,22 +163,31 @@ const DistributedUptimeStatus = () => {
 				url={url}
 				type="distributed"
 			/>
-
+		
 			<StatusHeader
 				monitor={monitor}
 				connectionStatus={connectionStatus}
 				elementToCapture={elementToCapture}
 			/>
+			
+			<SubHeader 
+				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"
 }