{"size": 1555, "ext": "js", "max_stars_repo_path": "src/views/BranchOfficeSettings/components/Header/index.js", "max_stars_repo_name": "jram97/spazer-web-root", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/BranchOfficeSettings/components/Header/index.js", "max_issues_repo_name": "jram97/spazer-web-root", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/views/BranchOfficeSettings/components/Header/index.js", "max_forks_repo_name": "jram97/spazer-web-root", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.4918032787, "max_line_length": 78, "alphanum_fraction": 0.5376205788}
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Typography } from '@material-ui/core';
import { Button } from 'components';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
    name: {
        marginTop: theme.spacing(1),
        color: 'black'
    },
    createBranchContainer: {
        display: 'flex',
        justifyContent: 'flex-end'
    },
    marginLabel: {
        marginTop: 30
    }
}));

const Header = ({sectionName, onClickButton, buttonText, isActiveMargin}) => {

    const classes = useStyles()

    return (
        <Grid container className={isActiveMargin ? classes.marginLabel : ''}>
            <Grid item md={6} sm={6} xs={12}>
                <Typography className={classes.name} variant="h4">
                    {sectionName}
                </Typography>
            </Grid>
            <Grid
                item
                md={6}
                sm={6}
                xs={12}
                className={classes.createBranchContainer}
            >
                <Button
                    subtitle={buttonText}
                    onClick={onClickButton}
                    type="primary"
                />
            </Grid>
        </Grid>
    )
}

Header.propTypes = {
    sectionName: PropTypes.string.isRequired,
    buttonText: PropTypes.string.isRequired,
    onClickButton: PropTypes.func,
    isActiveMargin: PropTypes.bool
}

Header.defaultProps = {
    onClickButton: () => {},
    isActiveMargin: false
}

export default Header;