134 lines
3.3 KiB
React
134 lines
3.3 KiB
React
import { Stack, Typography } from "@mui/material";
|
|
import Image from "../Image";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import PropTypes from "prop-types";
|
|
import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
|
|
|
|
/**
|
|
* StatBox Component
|
|
*
|
|
* A reusable component that displays a statistic with a heading and subheading
|
|
* in a styled box with a gradient background.
|
|
*
|
|
* @component
|
|
* @param {Object} props - The component props
|
|
* @param {string} props.heading - The primary heading/title of the statistic
|
|
* @param {string|React.ReactNode} props.subHeading - The value or description of the statistic
|
|
* @param {boolean} [props.gradient=false] - Determines if the box should have a gradient background
|
|
* @param {string} [props.status] - The status of the statistic
|
|
* @param {Object} [props.sx] - Additional custom styling to be applied to the box
|
|
*
|
|
* @example
|
|
* return (
|
|
* <StatBox
|
|
* heading="Total Users"
|
|
* subHeading="1,234"
|
|
* sx={{ width: 300 }}
|
|
* />
|
|
* )
|
|
*
|
|
* @returns {React.ReactElement} A styled box containing the statistic
|
|
*/
|
|
|
|
const StatBox = ({
|
|
img,
|
|
alt,
|
|
heading,
|
|
subHeading,
|
|
gradient = false,
|
|
status = "",
|
|
sx,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const { statusToTheme } = useUtils();
|
|
const themeColor = statusToTheme[status];
|
|
|
|
const statusBoxStyles = gradient
|
|
? {
|
|
background: `linear-gradient(to bottom right, ${theme.palette[themeColor].main} 30%, ${theme.palette[themeColor].lowContrast} 70%)`,
|
|
borderColor: theme.palette[themeColor].lowContrast,
|
|
}
|
|
: {
|
|
background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`,
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
};
|
|
|
|
const headingStyles = gradient
|
|
? {
|
|
color: theme.palette[themeColor].contrastText,
|
|
}
|
|
: {
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
};
|
|
|
|
const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 };
|
|
const detailTextStyles = gradient
|
|
? {
|
|
color: theme.palette[themeColor].contrastText,
|
|
"& span": {
|
|
color: theme.palette[themeColor].contrastText,
|
|
...spanFixedStyles,
|
|
},
|
|
}
|
|
: {
|
|
color: theme.palette.primary.contrastText,
|
|
"& span": {
|
|
color: theme.palette.primary.contrastTextTertiary,
|
|
...spanFixedStyles,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
sx={{
|
|
padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
|
|
/* TODO why are we using width and min width here? */
|
|
minWidth: 200,
|
|
width: 225,
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderRadius: 4,
|
|
...statusBoxStyles,
|
|
"& h2": {
|
|
/* TODO font size should come from theme */
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
textTransform: "uppercase",
|
|
...headingStyles,
|
|
},
|
|
"& p": {
|
|
fontSize: 18,
|
|
marginTop: theme.spacing(2),
|
|
...detailTextStyles,
|
|
},
|
|
...sx,
|
|
}}
|
|
>
|
|
{img && (
|
|
<Image
|
|
src={img}
|
|
height={"30px"}
|
|
width={"30px"}
|
|
alt={alt}
|
|
sx={{ marginRight: theme.spacing(8) }}
|
|
/>
|
|
)}
|
|
<Stack>
|
|
<Typography component="h2">{heading}</Typography>
|
|
<Typography>{subHeading}</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
StatBox.propTypes = {
|
|
heading: PropTypes.string.isRequired,
|
|
subHeading: PropTypes.node.isRequired,
|
|
gradient: PropTypes.bool,
|
|
status: PropTypes.string,
|
|
sx: PropTypes.object,
|
|
};
|
|
|
|
export default StatBox;
|