72 lines
1.6 KiB
React
72 lines
1.6 KiB
React
import PropTypes from "prop-types";
|
|
import { useTheme } from "@emotion/react";
|
|
import { Box, Stack, Typography } from "@mui/material";
|
|
import { RowContainer } from "../StandardContainer";
|
|
|
|
/**
|
|
|
|
*
|
|
* @component
|
|
* @example
|
|
*
|
|
* @param {string} props.headerText - Header text
|
|
* @param {number} props.headerLevel - Font characteristic of the header
|
|
* @param {string} props.subHeaderText - Subheader text
|
|
* @param {number} props.subHeaderLevel - Font characteristic of the subheader
|
|
* @param {string} props.alignItems - Align items
|
|
* @param {node} props.children - Children
|
|
* @returns {JSX.Element} The rendered component
|
|
*/
|
|
|
|
const SubHeader = ({
|
|
headerText,
|
|
headerLevel = 1,
|
|
subHeaderText,
|
|
subHeaderLevel = 1,
|
|
alignItems = "center",
|
|
children,
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
alignItems={alignItems}
|
|
justifyContent="space-between"
|
|
>
|
|
<Stack direction={"column"}>
|
|
<Typography
|
|
component={`h${headerLevel}`}
|
|
variant={`h${headerLevel}`}
|
|
mb={theme.spacing(1)}
|
|
>
|
|
<Typography
|
|
component="span"
|
|
fontSize="inherit"
|
|
color={theme.palette.primary.contrastTextTertiary}
|
|
>
|
|
{headerText}
|
|
</Typography>
|
|
</Typography>
|
|
<Typography
|
|
variant={`body${subHeaderLevel}`}
|
|
color={theme.palette.primary.contrastTextTertiary}
|
|
>
|
|
{subHeaderText}
|
|
</Typography>
|
|
</Stack>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
SubHeader.propTypes = {
|
|
headerText: PropTypes.string,
|
|
headerLevel: PropTypes.number,
|
|
subHeaderText: PropTypes.string,
|
|
subHeaderLevel: PropTypes.number,
|
|
alignItems: PropTypes.string,
|
|
children: PropTypes.node,
|
|
};
|
|
|
|
export default SubHeader;
|