{"size": 1256, "ext": "js", "max_stars_repo_path": "src/components/Header/Header.js", "max_stars_repo_name": "max-programming/bradgarropy.com", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Header/Header.js", "max_issues_repo_name": "max-programming/bradgarropy.com", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Header/Header.js", "max_forks_repo_name": "max-programming/bradgarropy.com", "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": 21.2881355932, "max_line_length": 58, "alphanum_fraction": 0.5796178344}
import ColorTheme from "components/ColorTheme"
import Logo from "components/Logo"
import MobileNavigation from "components/MobileNavigation"
import Navigation from "components/Navigation"
import Streaming from "components/Streaming"
import {Link} from "gatsby"
import {useLive} from "hooks"
import styled from "styled-components"

const HeaderWrapper = styled.header`
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;

    a {
        display: inline-block;
    }
`

const Left = styled.div`
    display: grid;
    grid-auto-flow: column;
    column-gap: 2rem;
    align-items: center;
`

const Right = styled.div`
    display: grid;
    grid-auto-flow: column;
    column-gap: 2rem;
    align-items: center;
`

const Header = () => {
    const live = useLive()

    return (
        <HeaderWrapper>
            <Left>
                <Link to="/" aria-label="bg">
                    <Logo />
                </Link>

                {live && <Streaming />}
            </Left>

            <Right>
                <Navigation />
                <MobileNavigation />
                <ColorTheme />
            </Right>
        </HeaderWrapper>
    )
}

export default Header
