{"size": 1956, "ext": "js", "max_stars_repo_path": "components/header/index.js", "max_stars_repo_name": "alismed/dialetus", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/header/index.js", "max_issues_repo_name": "alismed/dialetus", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/header/index.js", "max_forks_repo_name": "alismed/dialetus", "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": 25.4025974026, "max_line_length": 80, "alphanum_fraction": 0.6032719836}
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { transitions, darken } from 'polished'

import { transition } from '../../mixins/transition'

const Wrapper = styled.header`
  background-color: ${({ theme }) => theme.palette.primary};
  color: ${({ theme }) => theme.palette.white};
  width: 100%;
  position: relative;
  padding-top: ${({ theme }) => theme.spacing.medium};
  padding-bottom: ${({ theme }) => theme.spacing.medium};
  display: flex;
  justify-content: space-between;
  align-items: center;

  h1 {
    padding: ${({ theme }) => theme.spacing};
  }


  a {
    text-decoration: none;
    color: ${({ theme }) => theme.palette.primary.fallback};
    background-color: ${({ theme }) => theme.palette.white};
    padding: ${({ theme }) => theme.spacing};
    margin-right: ${({ theme }) => theme.spacing.medium};
    border-radius: ${({ theme}) => theme.radius};

    ${transitions([
      transition({ property: 'background-color', duration: '250ms' }),
      transition({ property: 'color', duration: '250ms' })
    ])};

    &:hover {
      color: ${({ theme }) => darken(0.2, `${theme.palette.primary.fallback}`)};
      background-color: ${({ theme }) => darken(0.2, `${theme.palette.white}`)};

      ${transitions([
        transition({ property: 'background-color', duration: '250ms' }),
        transition({ property: 'color', duration: '250ms' })
      ])};
    }
  }

  @media ${({ theme }) => theme.responsive.phone} {
    h1 {
     margin: auto;
    }

    a {
      display: none;
    }
  }
`

const Header = ({ headline, href }) => (
  <Wrapper>
    <h1>{headline}</h1>
    <a href={href} rel="noopener noreferrer" target="_blank">Contribua</a>
  </Wrapper>
)

Header.defaultProps = {
  headline: 'Dialetus',
  href: 'https://github.com/mvfsillva/dialetus-service'
}

Header.propTypes = {
  headline: PropTypes.string,
  href: PropTypes.string
}

export default Header
