restore repo structure

client/src/Components/MonitorCountHeader/index.jsx

@@ -0,0 +1,52 @@
+import { Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton";
+
+const MonitorCountHeader = ({
+	shouldRender = true,
+	monitorCount,
+	heading = "monitors",
+	sx,
+	children,
+}) => {
+	const theme = useTheme();
+	if (!shouldRender) return <SkeletonLayout />;
+
+	if (monitorCount === 1) {
+		heading = "monitor";
+	}
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			display="flex"
+			width="fit-content"
+			height={theme.spacing(18)}
+			gap={theme.spacing(2)}
+			mt={theme.spacing(2)}
+			px={theme.spacing(4)}
+			pt={theme.spacing(2)}
+			pb={theme.spacing(3)}
+			borderRadius={theme.spacing(1)}
+			sx={{
+				...sx,
+				backgroundColor: theme.palette.secondary.main,
+			}}
+		>
+			{monitorCount} <Typography component="h2">{heading}</Typography>
+			{children}
+		</Stack>
+	);
+};
+
+MonitorCountHeader.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitorCount: PropTypes.number,
+	heading: PropTypes.string,
+	children: PropTypes.node,
+	sx: PropTypes.object,
+};
+
+export default MonitorCountHeader;

client/src/Components/MonitorCountHeader/skeleton.jsx

@@ -0,0 +1,26 @@
+import { Stack, Skeleton } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const SkeletonLayout = () => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(2)}
+		>
+			<Skeleton
+				variant="text"
+				width={100}
+				height={32}
+			/>
+			<Skeleton
+				variant="circular"
+				width={40}
+				height={40}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;