From f8eb6e9bc2f08a4e32b4a56eb95ab25dd53b9e3e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 20 Feb 2025 19:00:06 -0800
Subject: [PATCH] add InfoBox

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

diff --git a/src/Components/InfoBox/index.jsx b/src/Components/InfoBox/index.jsx
new file mode 100644
index 000000000..6797d6c9c
--- /dev/null
+++ b/src/Components/InfoBox/index.jsx
@@ -0,0 +1,42 @@
+import { RowContainer } from "../StandardContainer";
+import { Stack, Typography } from "@mui/material";
+import Image from "../Image";
+
+import { useTheme } from "@mui/material/styles";
+
+const InfoBox = ({
+	img,
+	icon: Icon,
+	alt,
+	heading,
+	headingLevel = 2,
+	subHeading,
+	subHeadingLevel = "",
+	sx,
+}) => {
+	const theme = useTheme();
+	return (
+		<RowContainer sx={{ ...sx }}>
+			{img && (
+				<Image
+					src={img}
+					height={"30px"}
+					width={"30px"}
+					alt={alt}
+					sx={{ marginRight: theme.spacing(8) }}
+				/>
+			)}
+			{Icon && (
+				<Icon sx={{ width: "30px", height: "30px", marginRight: theme.spacing(8) }} />
+			)}
+			<Stack>
+				<Typography variant={`h${headingLevel}`}>{heading}</Typography>
+				<Typography variant={subHeadingLevel ? `h${subHeadingLevel}` : "body1"}>
+					{subHeading}
+				</Typography>
+			</Stack>
+		</RowContainer>
+	);
+};
+
+export default InfoBox;