{"size": 855, "ext": "js", "max_stars_repo_path": "src/components/layout.js", "max_stars_repo_name": "ifmael/ifmael-web", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/layout.js", "max_issues_repo_name": "ifmael/ifmael-web", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/layout.js", "max_forks_repo_name": "ifmael/ifmael-web", "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": 19.8837209302, "max_line_length": 73, "alphanum_fraction": 0.6046783626}
import React from "react"
import LocaleProvider from "./locale-provider"
import styled from "@emotion/styled"

import Header from "./header"
import "./layout.css"

const Content = styled.div`
  margin: 0 auto;
  max-width: 860px;
  padding: 0 1.0875rem 1rem;
  padding-top: 0;
`

const GatsbyLink = styled.a`
  margin-left: 5px;
`

const Footer = styled.footer`
  display: flex;
  justify-content: center;
`

const Layout = ({ children, locale }) => {
  return (
    <LocaleProvider locale={ locale }>
      <Header locale={locale}/>
      <Content>
        <main>{children}</main>
        <Footer>
          <p>
          © {new Date().getFullYear()}, Built with
          {` `}
          </p>
          <GatsbyLink href="https://www.gatsbyjs.org">Gatsby</GatsbyLink>
        </Footer>
      </Content>
    </LocaleProvider>
  )
}

export default Layout
