{"size": 619, "ext": "js", "max_stars_repo_path": "src/components/heading.js", "max_stars_repo_name": "ChatLurking/gatsby-website", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/heading.js", "max_issues_repo_name": "ChatLurking/gatsby-website", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/heading.js", "max_forks_repo_name": "ChatLurking/gatsby-website", "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": 17.6857142857, "max_line_length": 39, "alphanum_fraction": 0.6558966074}
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const Heading = ({ title }) => (
  <Wrapper>
    <p>{title.toUpperCase()}</p>
    <Underline />
  </Wrapper>
);

Heading.propTypes = {
  title: PropTypes.string.isRequired,
  start: PropTypes.string,
  end: PropTypes.string,
};

const Wrapper = styled.div`
  display: block;
  p {
    font-style: italic;
    font-weight: 300;
    font-size: 1.25rem;
    margin-bottom: 12px;
  }
`;

const Underline = styled.div`
  width: 62px;
  border-top: 1px solid #4e85bb;
  margin-bottom: 0.5rem;
`;

export default Heading;
