<commit_before>import React from 'react'
import styled from 'styled-components'

export const Skill = props => {
  return (
    <li>
      <SkillName>{props.name}</SkillName>
      <SkillLevel level={props.level} />
    </li>
  )
}

const SkillLevel = props => {
  const level = props.level ? props.level : 0

  switch (level) {
    case 1:
      return (
        <div>
          <SkillMark solid={'true'} />
          <SkillMark />
          <SkillMark />
        </div>
      )
    case 2:
      return (
        <div>
          <SkillMark solid={'true'} />
          <SkillMark solid={'true'} />
          <SkillMark />
        </div>
      )
    case 3:
      return (
        <div>
          <SkillMark solid={'true'} />
          <SkillMark solid={'true'} />
          <SkillMark solid={'true'} />
        </div>
      )
    default:
      return (
        <div>
          <SkillMark />
          <SkillMark />
          <SkillMark />
        </div>
      )
  }
}

const SkillName = styled.h5`
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #778492;
  margin-bottom: 0;
`

const SkillMark = styled.span`
  background-color: ${props => (props.solid ? '#17CF5D' : '#D6D6D6')};
  display: inline-block;
  height: 2px;
  margin-right: 10px;
  width: 55px;
`<commit_msg>rework single skill component<commit_after>import React from 'react'
import styled from 'styled-components'

export const Skill = ({ name, level }) => (
  <Container>
    <Name>{name}</Name>
    <Level level={level} />
  </Container>
)

const Level = ({ level = 0 }) => (
  <div>
    <Mark solid={level > 0} />
    <Mark solid={level > 1} />
    <Mark solid={level > 2} />
  </div>
)

const Container = styled.div`
  display: flex;
  flex-flow: column;
  margin-right: ${props => props.theme.spacing(2)};
`

const Name = styled.h5`
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #778492;
  margin-bottom: 0;
`

const Mark = styled.span`
  background-color: ${props => (props.solid ? '#17CF5D' : '#D6D6D6')};
  display: inline-block;
  height: 2px;
  margin-right: ${props => props.theme.spacing(1)};
  width: ${props => props.theme.spacing(2)};
`
{'fraction_non_alphanumeric': 0.1665908056440601, 'fraction_numerical': 0.025034137460172964, 'mean_word_length': 2.2708333333333335, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 50, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6871199', 'n_tokens_mistral': 811, 'n_tokens_neox': 778, 'n_words': 173}