weseek__growi/src/client/js/components/Admin/Customize/CustomizeLayoutOption.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';

class CustomizeLayoutOption extends React.Component {

  render() {
    const { layoutType } = this.props;

    return (
      <React.Fragment>
        <h4>
          <div className="custom-control custom-radio">
            <input
              type="radio"
              className="custom-control-input"
              id={`radio-layout-${layoutType}`}
              checked={this.props.isSelected}
              onChange={this.props.onSelected}
            />
            <label className="custom-control-label" htmlFor={`radio-layout-${layoutType}`}>
              {/* eslint-disable-next-line react/no-danger */}
              <span dangerouslySetInnerHTML={{ __html: this.props.labelHtml }} />
            </label>
          </div>
        </h4>
        <a href={`/images/admin/customize/layout-${layoutType}.gif`} className="ss-container">
          <img src={`/images/admin/customize/layout-${layoutType}-thumb.gif`} width="240px" />
        </a>
        {/* render layout description */}
        {this.props.children}
      </React.Fragment>
    );
  }

}

CustomizeLayoutOption.propTypes = {
  t: PropTypes.func.isRequired, // i18next

  layoutType: PropTypes.string.isRequired,
  labelHtml: PropTypes.string.isRequired,
  isSelected: PropTypes.bool.isRequired,
  onSelected: PropTypes.func.isRequired,
  children: PropTypes.array.isRequired,
};

export default withTranslation()(CustomizeLayoutOption);