{"size": 925, "ext": "js", "max_stars_repo_path": "src/components/billboardWrapper.js", "max_stars_repo_name": "kiamco/unifind-application", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/billboardWrapper.js", "max_issues_repo_name": "kiamco/unifind-application", "max_issues_repo_issues_event_min_datetime": "2020-11-29T18:35:46.000Z", "max_issues_repo_issues_event_max_datetime": "2021-02-23T06:26:28.000Z", "max_forks_repo_path": "src/components/billboardWrapper.js", "max_forks_repo_name": "kiamco/unifind-application", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 20, "max_forks_count": null, "avg_line_length": 24.3421052632, "max_line_length": 98, "alphanum_fraction": 0.5513513514}
import React from 'react';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import BillboardWave from '../assets/img/billboard_wave.png';


const useStyles = makeStyles({
    root:{
        height:"71vh",
        background:`no-repeat url(${BillboardWave}) left/50%`,
        backgroundPositionY:'top',
        ['@media (max-width:900px)']:{
            height:"61vh"
        },
        ['@media (max-width:800px)']:{
            background:'none',
            height:"51vh"
        }
    },
    wave:{
        minWidth:"50%",
        height:"90vh"
        
    }
});

const BillboardWrapper = (props) => {
    const classes = useStyles();

    return (
        <Box className={classes.root}>
            {/* <img className={classes.wave} src={BillboardWave} alt="background wave"></img> */}
            {props.children}
        </Box>
    )
};

export default BillboardWrapper;