{"size": 1191, "ext": "js", "max_stars_repo_path": "components/dataset/datagouv/check.js", "max_stars_repo_name": "Coxibiz/geo.data.gouv.fr", "max_stars_repo_stars_event_min_datetime": "2017-10-15T13:43:48.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-24T02:06:05.000Z", "max_issues_repo_path": "components/dataset/datagouv/check.js", "max_issues_repo_name": "Coxibiz/geo.data.gouv.fr", "max_issues_repo_issues_event_min_datetime": "2017-10-12T10:03:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-10T16:19:47.000Z", "max_forks_repo_path": "components/dataset/datagouv/check.js", "max_forks_repo_name": "sgmap-inspire/inspire.data.gouv.fr", "max_forks_repo_forks_event_min_datetime": "2018-04-12T15:16:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-15T08:49:49.000Z"}
{"max_stars_count": 65, "max_issues_count": 513, "max_forks_count": 12, "avg_line_length": 18.609375, "max_line_length": 57, "alphanum_fraction": 0.5121746432}
import React from 'react'
import PropTypes from 'prop-types'

import CheckIcon from 'react-icons/lib/fa/check'
import FailIcon from 'react-icons/lib/fa/close'

const Check = ({title, isValid, children}) => (
  <div className={`container ${isValid ? 'valid' : ''}`}>
    <h4>
      {title}
      <i className={isValid ? 'valid' : null}>
        {isValid ? (
          <CheckIcon style={{verticalAlign: -2}} />
        ) : (
          <FailIcon style={{verticalAlign: -3}} />
        )}
      </i>
    </h4>
    <div className='body'>
      {children}
    </div>

    <style jsx>{`
      @import 'colors';

      .container {
        margin-bottom: 1.3em;
      }

      .body {
        border-left: 2px solid $red;
        padding: 0.2em 0 0.2em 0.6em;
      }

      h4 {
        margin-bottom: 0.4em;
      }

      i {
        color: $red;
        margin-left: 5px;
      }

      .valid {
        i {
          color: $green;
        }

        .body {
          border-color: $green;
        }
      }
    `}</style>
  </div>
)

Check.propTypes = {
  title: PropTypes.string.isRequired,
  isValid: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired
}

export default Check
