All files / src/components TitleSection.js

100% Statements 9/9
100% Branches 2/2
100% Functions 3/3
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46          61x     852x 92x   760x                               61x 1522x 1522x   1522x                            
import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
 
const useStyles = makeStyles((theme) => ({
  titleStyle: {
    color: (props) => {
      if (props.textVariant === 'black') {
        return theme.palette.primary.main
      } else {
        return theme.palette.warning.main
      }
    },
    [theme.breakpoints.down('sm')]: {
      fontSize: '32px',
    },
    marginBottom: '32px',
    textAlign: 'center',
  },
}));
 
/**
 * Getting Started Call to Action typically right above the footer.
 * @param {*} props.children
 * @param {*} props.textVariant
 */
const TitleSection = (props) => {
  const classes = useStyles(props);
  const title = props.children;
 
  return (
    <Grid container>
      <Grid item xs={1} md={2} />
      <Grid item xs={10} md={8}>
        <Typography variant='h1' className={classes.titleStyle}>
          {title}
        </Typography>
      </Grid>
      <Grid item xs={1} md={2} />
    </Grid>
  );
};
 
export default TitleSection;