{"size": 615, "ext": "js", "max_stars_repo_path": "src/components/skillItem.js", "max_stars_repo_name": "zetagame/simple-react-portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/skillItem.js", "max_issues_repo_name": "zetagame/simple-react-portfolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/skillItem.js", "max_forks_repo_name": "zetagame/simple-react-portfolio", "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": 24.6, "max_line_length": 72, "alphanum_fraction": 0.6211382114}
import React from 'react';

const SkillItem = ({skill}) => {
  const title = skill.title;
  const level = skill.level;
  const totalCircles = 5;
  const unfilledCircles = totalCircles - level;
  let circles = [];

  for (var i=0; i < level; i++) {
    circles.push(<span className="skill-circle filled" key={i}></span>);
  }
  for (var j=0; j < unfilledCircles; j++) {
    circles.push(<span className="skill-circle" key={j + 50}></span>);
  }

  return (
    <div className="col-6 col-md-4 col-lg-4 skill-column">
      <span className="title">{title}</span> {circles}
    </div>
  )
};

export default SkillItem;
