{"size": 807, "ext": "js", "max_stars_repo_path": "src/shared/components/UserRating.js", "max_stars_repo_name": "frontity/extension-org-226", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/shared/components/UserRating.js", "max_issues_repo_name": "frontity/extension-org-226", "max_issues_repo_issues_event_min_datetime": "2019-02-06T10:52:40.000Z", "max_issues_repo_issues_event_max_datetime": "2019-02-06T10:52:40.000Z", "max_forks_repo_path": "src/shared/components/UserRating.js", "max_forks_repo_name": "frontity/extension-org-226", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 18.3409090909, "max_line_length": 49, "alphanum_fraction": 0.6728624535}
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Stars from './Stars';

const UserRating = ({ label, votes, stars }) => (
  <Container>
    <Label>
      {label}
      <Votes>{votes}</Votes>
    </Label>
    <StyledStars stars={stars} />
  </Container>
);

UserRating.propTypes = {
  label: PropTypes.string.isRequired,
  votes: PropTypes.string.isRequired,
  stars: PropTypes.string.isRequired,
};

export default UserRating;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const StyledStars = styled(Stars)`
  color: #f28a1b;
`;

const Label = styled.div`
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 27px;
`;

const Votes = styled.span`
  color: #808080;
`;
