GenericHeaderSection.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import NavBreadcrumbs from './NavBreadcrumbs';
import TitleSection from './TitleSection';

const useStyles = makeStyles({
  addPad: {
    minHeight: 32,
  },
  headerBox: {
    minHeight: 300,
  },
});

const GenericHeaderSection = (props) => {
  const { mainTitle, children, breadCrumbLinks, addPad } = props;
  const classes = useStyles();

  return (
    <Box className={classes.headerBox}>
      <NavBreadcrumbs crumbs={breadCrumbLinks} />
      {addPad && <div className={classes.addPad} />}
      <TitleSection>{mainTitle}</TitleSection>
      {children}
    </Box>
  );
};

export default GenericHeaderSection;