<commit_before>import React from 'react'
import Settings from './svg/settings'

export default () => (
  <div className="settings-container">
    <Settings />
    <style jsx>{`
      .settings-container {
        height: 37px;
        width: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        border: 0.5px solid #333;
        border-radius: 3px;
      }
    `}</style>
  </div>
)<commit_msg>Start settings component<commit_after>import React from 'react'
import enhanceWithClickOutside from 'react-click-outside'
import SettingsIcon from './svg/settings'

class Settings extends React.Component {
  constructor(props) {
    super()
    this.state = {
      isVisible: false
    }
    this.toggle = this.toggle.bind(this)
  }

  toggle() {
    this.setState({ isVisible: !this.state.isVisible })
  }

  handleClickOutside() {
    this.setState({ isVisible: false });
  }

  render() {
    return (
      <div className="settings-container" onClick={this.toggle}>
        <div className={`settings-display ${this.state.isVisible ? 'is-visible' : ''}`}>
          <SettingsIcon />
        </div>
        <div className="settings-settings">
        </div>
        <style jsx>{`
          .settings-container {
            height: 37px;
            width: 37px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
          }

          .settings-display {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 0.5px solid #333;
            border-radius: 3px;
            user-select: none;
            position: relative;
            z-index: 1;
            background: #000;
            cursor: pointer;
          }

          .settings-display:hover {
            background: #131313;
          }

          .is-visible + .settings-settings {
            display: block;
          }

          .settings-settings {
            display: none;
            border: 0.5px solid #333;
            height: 200px;
            width: 200px;
            border-radius: 3px;
            position: absolute;
            margin-top: 120px;
            background: #000;
          }
        `}</style>
      </div>
    )
  }
}

export default enhanceWithClickOutside(Settings)
{'fraction_non_alphanumeric': 0.11738056013179572, 'fraction_numerical': 0.023887973640856673, 'mean_word_length': 1.6402173913043478, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 18, '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': '4295303', 'n_tokens_mistral': 723, 'n_tokens_neox': 670, 'n_words': 156}