{"size": 888, "ext": "js", "max_stars_repo_path": "react-app/src/components/Gallery/Navigation.js", "max_stars_repo_name": "vlumi/photo-diary", "max_stars_repo_stars_event_min_datetime": "2021-03-02T07:34:13.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-02T07:34:13.000Z", "max_issues_repo_path": "react-app/src/components/Gallery/Navigation.js", "max_issues_repo_name": "vlumi/photo-diary", "max_issues_repo_issues_event_min_datetime": "2020-07-10T03:15:14.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-31T01:26:18.000Z", "max_forks_repo_path": "react-app/src/components/Gallery/Navigation.js", "max_forks_repo_name": "vlumi/photo-diary", "max_forks_repo_forks_event_min_datetime": "2021-04-06T06:42:24.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-06T09:01:39.000Z"}
{"max_stars_count": 1, "max_issues_count": 18, "max_forks_count": 2, "avg_line_length": 18.8936170213, "max_line_length": 39, "alphanum_fraction": 0.6373873874}
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const Root = styled.h2`
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50px;
  color: var(--header-color);
  background: var(--header-background);
  font-size: 24pt;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;

  > * {
    flex-grow: 1;
    flex-shrink: 1;
    vertical-align: middle;
    position: relative;
    display: inline;
  }
  & :link {
    position: relative;
    color: var(--header-color);
  }
  & :visited {
    color: var(--header-color);
  }
`;

const Navigation = ({ children }) => {
  return <Root>{children}</Root>;
};
Navigation.propTypes = {
  children: PropTypes.any.isRequired,
};
export default Navigation;
