restore repo structure

client/src/Components/StatusBoxes/index.jsx

@@ -0,0 +1,36 @@
+// Components
+import { Stack } from "@mui/material";
+import SkeletonLayout from "./skeleton";
+// Utils
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+const StatusBoxes = ({ shouldRender, flexWrap = "nowrap", children }) => {
+	const theme = useTheme();
+	if (!shouldRender) {
+		return (
+			<SkeletonLayout
+				numBoxes={children?.length ?? 1}
+				flexWrap={flexWrap}
+			/>
+		);
+	}
+
+	return (
+		<Stack
+			direction="row"
+			flexWrap={flexWrap}
+			gap={theme.spacing(8)}
+			justifyContent="space-between"
+            display="flex"
+		>
+			{children}
+		</Stack>
+	);
+};
+
+StatusBoxes.propTypes = {
+	shouldRender: PropTypes.bool,
+	children: PropTypes.node,
+};
+
+export default StatusBoxes;

client/src/Components/StatusBoxes/skeleton.jsx

@@ -0,0 +1,33 @@
+import { Stack, Skeleton } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+const SkeletonLayout = ({ numBoxes, flexWrap }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			flexWrap={flexWrap}
+			gap={theme.spacing(4)}
+			mt={theme.spacing(4)}
+		>
+			{Array.from({ length: numBoxes }).map((_, index) => {
+				const width = `${200 / numBoxes}%`;
+				return (
+					<Skeleton
+						variant="rounded"
+						width={width}
+						height={100}
+						key={index}
+					/>
+				);
+			})}
+		</Stack>
+	);
+};
+
+SkeletonLayout.propTypes = {
+	flexWrap: PropTypes.string,
+	numBoxes: PropTypes.number,
+};
+
+export default SkeletonLayout;