{"size": 863, "ext": "js", "max_stars_repo_path": "src/NavBar.js", "max_stars_repo_name": "adamfriedl/lingo-bingo", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/NavBar.js", "max_issues_repo_name": "adamfriedl/lingo-bingo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/NavBar.js", "max_forks_repo_name": "adamfriedl/lingo-bingo", "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": 23.3243243243, "max_line_length": 59, "alphanum_fraction": 0.5214368482}
// @flow

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Absolute, Toolbar, NavLink } from 'rebass';

const CustomLink = styled(Link)`
  text-decoration: none;
  color: #79e4a6;
`;

const NavBar = () => {
  return (
    <div>
      <Absolute z={2} top left right>
        <Toolbar w={'100%'} bg="transparent" color="teal3">
          <NavLink>
            <CustomLink to="/" children="Home" />
          </NavLink>
          <NavLink>
            <CustomLink to="/about" children="About" />
          </NavLink>
          <NavLink
            ml="auto"
            mr={[2, 3]}
            href="http://adamfriedl.com"
            children="by Adam Friedl"
            style={{ fontFamily: 'Damion' }}
          />
        </Toolbar>
      </Absolute>
    </div>
  );
};
export default NavBar;
