diff options
| -rw-r--r-- | src/lib/ContentSection/ContentSection.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx index 68ecbca..ba8b882 100644 --- a/src/lib/ContentSection/ContentSection.tsx +++ b/src/lib/ContentSection/ContentSection.tsx @@ -9,11 +9,12 @@ import { interface PropTypes { sectionName: string; + level?: number; } const useStyles = makeStyles(theme => ({ content: { - padding: theme.spacing(1, 2, 1, 3), + padding: theme.spacing(2, 2, 1, 3), marginBottom: theme.spacing(1), '& .MuiButton-root': { @@ -22,12 +23,18 @@ const useStyles = makeStyles(theme => ({ }, })); -const ContentSection: React.FC<PropTypes> = ({ sectionName, children }) => { +const ContentSection: React.FC<PropTypes> = ({ sectionName, children, level = 0 }) => { const classes = useStyles(); + level += 2; // Make everything smaller + if (level > 6) level = 6; + + type Variant = 'h3' | 'h4' | 'h5' | 'h6'; + const variant: Variant = 'h' + level as Variant; + return ( <> - <Typography variant="h4">{sectionName}</Typography> + <Typography variant={variant}>{sectionName}</Typography> <Divider variant="middle"/> <Typography component="div" className={classes.content}> {children} |