add a standard container

src/Components/StandardContainer/index.jsx

@@ -0,0 +1,51 @@
+// Components
+import { Stack } from "@mui/material";
+
+// Utils
+import { useTheme } from "@emotion/react";
+
+const Container = ({ children, direction, backgroundColor, sx }) => {
+	const theme = useTheme();
+	let bgColor =
+		typeof backgroundColor !== "undefined"
+			? backgroundColor
+			: theme.palette.background.main;
+	return (
+		<Stack
+			direction={direction}
+			padding={theme.spacing(8)}
+			gap={theme.spacing(2)}
+			border={1}
+			borderColor={theme.palette.primary.lowContrast}
+			borderRadius={theme.spacing(4)}
+			backgroundColor={bgColor}
+			sx={{ ...sx }}
+		>
+			{children}
+		</Stack>
+	);
+};
+
+export const ColContainer = ({ children, backgroundColor, sx }) => {
+	return (
+		<Container
+			direction="column"
+			backgroundColor={backgroundColor}
+			sx={{ ...sx }}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const RowContainer = ({ children, backgroundColor, sx }) => {
+	return (
+		<Container
+			direction="row"
+			backgroundColor={backgroundColor}
+			sx={{ ...sx }}
+		>
+			{children}
+		</Container>
+	);
+};