From aee3e6a604c529f76e6bb63a2c99024f426162ec Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 18 Dec 2024 13:44:48 -0800
Subject: [PATCH] refactor StatBox to reusable component

---
 Client/src/Components/StatBox/index.jsx | 44 +++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 Client/src/Components/StatBox/index.jsx

diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx
new file mode 100644
index 000000000..84827c826
--- /dev/null
+++ b/Client/src/Components/StatBox/index.jsx
@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+const StatBox = ({ heading, stat, subHeading, sx }) => {
+	const theme = useTheme();
+	console.log(sx);
+	return (
+		<Box
+			sx={{
+				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
+				minWidth: 200,
+				width: 225,
+				border: 1,
+				borderStyle: "solid",
+				borderColor: theme.palette.border.light,
+				borderRadius: 4,
+				backgroundColor: theme.palette.background.main,
+				background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,
+				"& h2": {
+					fontSize: 13,
+					fontWeight: 500,
+					color: theme.palette.text.secondary,
+					textTransform: "uppercase",
+				},
+				"& p": {
+					fontSize: 18,
+					color: theme.palette.text.primary,
+					marginTop: theme.spacing(2),
+					"& span": {
+						color: theme.palette.text.tertiary,
+						marginLeft: theme.spacing(2),
+						fontSize: 15,
+					},
+				},
+				...sx,
+			}}
+		>
+			<Typography component="h2">{heading}</Typography>
+			<Typography>{subHeading}</Typography>
+		</Box>
+	);
+};
+
+export default StatBox;