{"size": 536, "ext": "js", "max_stars_repo_path": "src/Components/Home/ItemSkill.js", "max_stars_repo_name": "Pedro749/my-portifolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Components/Home/ItemSkill.js", "max_issues_repo_name": "Pedro749/my-portifolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Components/Home/ItemSkill.js", "max_forks_repo_name": "Pedro749/my-portifolio", "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": 35.7333333333, "max_line_length": 156, "alphanum_fraction": 0.598880597}
import React from 'react';
import styles from './ItemSkill.module.css';

const SkillsItem = ({ skill } ) => {
  const [view, setView] = React.useState(skill.open);

  return (
    <li  className={ styles.itemList } onClick={ () => setView(!view) }>
      <h3 className={ `${styles.language} ${view ? styles.actives : ''}` }>{ skill['language'] } <span className={ styles.sub }>{ skill['sub'] }</span></h3>
      <p className={`${styles.use} ${view ? styles.active : ''}`}>{ skill['use'] }</p>
    </li>
);
};

export default SkillsItem;