107 lines
2.8 KiB
React
107 lines
2.8 KiB
React
// Components
|
|
import { Typography, Stack } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import { useTheme } from "@emotion/react";
|
|
import IconBox from "../../IconBox";
|
|
|
|
/**
|
|
* `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.
|
|
*
|
|
* @component
|
|
* @param {Object} props - The properties that define the `EmptyView` component.
|
|
* @param {React.ReactNode} [props.icon] - An optional icon to display at the top of the empty view.
|
|
* @param {string} [props.header] - An optional header text displayed next to the icon.
|
|
* @param {string} [props.message="No Data"] - The message to be displayed in the empty view.
|
|
* @param {'h1' | 'h2' | 'h3'} [props.headingLevel="h2"] - The heading level for the message text.
|
|
* @param {string} [props.justifyContent="flex-start"] - The CSS `justify-content` value to align elements vertically.
|
|
* @param {string} [props.height="100%"] - The height of the empty view container.
|
|
*
|
|
* @example
|
|
* // Example usage of EmptyView component:
|
|
* <EmptyView
|
|
* icon={<SomeIcon />}
|
|
* header="Average Response Time"
|
|
* message="No Response Time Available"
|
|
* headingLevel="h2"
|
|
* justifyContent="center"
|
|
* height="50%"
|
|
* />
|
|
*
|
|
* @returns {React.Element} The `EmptyView` component with customizable icon, header, and message.
|
|
*/
|
|
|
|
const EmptyView = ({
|
|
icon,
|
|
header,
|
|
message = "No Data",
|
|
headingLevel = "h2",
|
|
justifyContent = "flex-start",
|
|
height = "100%",
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
flex={1}
|
|
direction="row"
|
|
sx={{
|
|
backgroundColor: theme.palette.primary.main,
|
|
|
|
border: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.palette.primary.lowContrast,
|
|
borderRadius: 2,
|
|
borderTopRightRadius: 4,
|
|
borderBottomRightRadius: 4,
|
|
}}
|
|
>
|
|
<Stack
|
|
flex={1}
|
|
alignItems="center"
|
|
sx={{
|
|
padding: theme.spacing(8),
|
|
justifyContent,
|
|
gap: theme.spacing(8),
|
|
height,
|
|
"& h2": {
|
|
color: theme.palette.primary.contrastTextSecondary,
|
|
fontSize: 15,
|
|
fontWeight: 500,
|
|
},
|
|
|
|
"& tspan, & text": {
|
|
fill: theme.palette.primary.contrastTextTertiary,
|
|
},
|
|
}}
|
|
>
|
|
<Stack
|
|
alignSelf="flex-start"
|
|
direction="row"
|
|
alignItems="center"
|
|
gap={theme.spacing(6)}
|
|
>
|
|
{icon && <IconBox>{icon}</IconBox>}
|
|
{header && <Typography component="h2">{header}</Typography>}
|
|
</Stack>
|
|
<Stack
|
|
flex={1}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Typography component={headingLevel}>{message}</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
EmptyView.propTypes = {
|
|
message: PropTypes.string,
|
|
icon: PropTypes.node,
|
|
header: PropTypes.string,
|
|
headingLevel: PropTypes.oneOf(["h1", "h2", "h3"]),
|
|
justifyContent: PropTypes.string,
|
|
height: PropTypes.string,
|
|
};
|
|
|
|
export default EmptyView;
|