import React from "react" import { Helmet } from "react-helmet" import styled, { createGlobalStyle } from "styled-components" import GitHubButton from "react-github-btn" const GlobalStyle = createGlobalStyle` * {box-sizing: border-box} body { font-size: 14px; font-family: 'oswald', serif; background-color: #111111; color: #04eaf5; margin: 0; padding: 0; } ` const Grid = styled.div` display: block; max-width: 900px; margin: 0 auto; padding: 0 15px; ` export default function Layout({ children }) { const currentYear = new Date().getFullYear() return ( <> <GlobalStyle /> <Helmet> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Coda:400,700" /> <link href="https://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet" /> </Helmet> <Grid> <GitHubButton href="https://github.com/garytube/ingress-cycle-stats" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Star garytube/ingress-cycle-stats on GitHub" > Star </GitHubButton> <GitHubButton href="https://github.com/garytube/ingress-cycle-stats/fork" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Fork garytube/ingress-cycle-stats on GitHub" > Fork </GitHubButton> <GitHubButton href="https://github.com/garytube/ingress-cycle-stats/issues" data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-size="large" data-show-count="true" aria-label="Issue garytube/ingress-cycle-stats on GitHub" > Issue </GitHubButton> <main>{children}</main> <footer> © {currentYear}, Built by{" "} <a href="https:/besmurf.de" target="_blank" rel="noopener noreferrer"> Besmurf </a> </footer> </Grid> </> ) }