text: import React, { Component } from "react";
  
  class Skills extends Component {
    render() {
      if (this.props.sharedSkills && this.props.resumeBasicInfo) {
        var sectionName = this.props.resumeBasicInfo.section_name.skills;
        var skill_group = this.props.sharedSkills.icons.reduce(function (r, a) {
          r[a.type] = r[a.type] || [];
          r[a.type].push(a);
          return r;
        }, Object.create(null));
  
  
        var skills = skill_list => skill_list.map(function (skills, i) {
          return (
            <li className="list-inline-item mx-3" key={i}>
              <span>
                <div className="text-center skills-tile">
                  <i className={skills.class} style={{ fontSize: "220%" }}>
                    <p
                      className="text-center"
                      style={{ fontSize: "30%", marginTop: "4px" }}
                    >
                      {skills.name}
                    </p>
                  </i>
                </div>
              </span>
            </li>
          );
        });
  
        var skill_boxs = this.props.sharedSkills.order.map((skill, idx) => (
          <div className="skill-box" key={idx}>
            <ul className="list-inline mx-auto skill-icon">{skills(skill_group[skill.field])}</ul>
            <p className="project-title-settings mt-3 sub-text">{skill.title}</p>
          </div>
        ))
      }
  
      
  
      return (
        <section id="skills">
          <div className="col-md-12">
            <div className="col-md-12">
              <h1 className="section-title">
                <span className="text-white">{sectionName}</span>
              </h1>
            </div>
            <div className="col-md-12 text-center">
              {skill_boxs}
            </div>
          </div>
        </section>
      );
    }
  }
  
  export default Skills;
  