From e22920ebf908ef61627254039d61eb3d5837628b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 20 Feb 2025 19:02:01 -0800
Subject: [PATCH] add a standard container

---
 src/Components/StandardContainer/index.jsx | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/Components/StandardContainer/index.jsx

diff --git a/src/Components/StandardContainer/index.jsx b/src/Components/StandardContainer/index.jsx
new file mode 100644
index 000000000..c736b3ecc
--- /dev/null
+++ b/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>
+	);
+};