53 lines
1.1 KiB
React
53 lines
1.1 KiB
React
import { Stack, Typography } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import { useTheme } from "@emotion/react";
|
|
import SkeletonLayout from "./skeleton";
|
|
|
|
const MonitorCountHeader = ({
|
|
shouldRender = true,
|
|
monitorCount,
|
|
heading = "monitors",
|
|
sx,
|
|
children,
|
|
}) => {
|
|
const theme = useTheme();
|
|
if (!shouldRender) return <SkeletonLayout />;
|
|
|
|
if (monitorCount === 1) {
|
|
heading = "monitor";
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
display="flex"
|
|
width="fit-content"
|
|
height={theme.spacing(18)}
|
|
gap={theme.spacing(2)}
|
|
mt={theme.spacing(2)}
|
|
px={theme.spacing(4)}
|
|
pt={theme.spacing(2)}
|
|
pb={theme.spacing(3)}
|
|
borderRadius={theme.spacing(1)}
|
|
sx={{
|
|
...sx,
|
|
backgroundColor: theme.palette.secondary.main,
|
|
}}
|
|
>
|
|
{monitorCount} <Typography component="h2">{heading}</Typography>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
MonitorCountHeader.propTypes = {
|
|
shouldRender: PropTypes.bool,
|
|
monitorCount: PropTypes.number,
|
|
heading: PropTypes.string,
|
|
children: PropTypes.node,
|
|
sx: PropTypes.object,
|
|
};
|
|
|
|
export default MonitorCountHeader;
|