<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import { coalesce } from 'utils'
import styles from './styles.scss'

const VerticalCenteredContent = (props) => (
  <div className={`${styles.container} ${coalesce(props.className, '')}`}>
    <div className={styles.shim} />
    <div className={styles.content}>
      {props.children}
    </div>
    <div className={styles.shim} />
  </div>
)

VerticalCenteredContent.propTypes = {
  children: PropTypes.element.isRequired,
  className: PropTypes.string,
}

export default VerticalCenteredContent
<commit_msg>vertical centered content: use classNames instead of formatting string<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import styles from './styles.scss'

const VerticalCenteredContent = (props) => (
  <div className={classNames(styles.container, props.className)}>
    <div className={styles.shim} />
    <div className={styles.content}>
      {props.children}
    </div>
    <div className={styles.shim} />
  </div>
)

VerticalCenteredContent.propTypes = {
  children: PropTypes.element.isRequired,
  className: PropTypes.string,
}

export default VerticalCenteredContent

{'fraction_non_alphanumeric': 0.1285831285831286, 'fraction_numerical': 0.0, 'mean_word_length': 4.819047619047619, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, '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': '6886122', 'n_tokens_mistral': 358, 'n_tokens_neox': 358, 'n_words': 86}