Add a config box component

2026-04-27 03:59:43 -05:00 · 2024-12-18 12:19:21 -08:00
parent e5a7860ff0
commit bd5bc2617c
1 changed files with 38 additions and 0 deletions
@@ -0,0 +1,38 @@
+import { Stack, styled } from "@mui/material";
+
+const ConfigBox = styled(Stack)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "row",
+	justifyContent: "space-between",
+	gap: theme.spacing(20),
+	backgroundColor: theme.palette.background.main,
+	border: 1,
+	borderStyle: "solid",
+	borderColor: theme.palette.border.light,
+	borderRadius: theme.spacing(2),
+	"& > *": {
+		paddingTop: theme.spacing(12),
+		paddingBottom: theme.spacing(18),
+	},
+	"& > div:first-of-type": {
+		flex: 0.7,
+		borderRight: 1,
+		borderRightStyle: "solid",
+		borderRightColor: theme.palette.border.light,
+		paddingRight: theme.spacing(15),
+		paddingLeft: theme.spacing(15),
+	},
+	"& > div:last-of-type": {
+		flex: 1,
+		paddingRight: theme.spacing(20),
+		paddingLeft: theme.spacing(18),
+	},
+	"& h1, & h2": {
+		color: theme.palette.text.secondary,
+	},
+	"& p": {
+		color: theme.palette.text.tertiary,
+	},
+}));
+
+export default ConfigBox;