usage.js

import { Fragment, default as React } from 'react';
import PropTypes from 'prop-types';
import StaticBadgeMaker from './static-badge-maker';
import DynamicBadgeMaker from './dynamic-badge-maker';
import { staticBadgeUrl } from '../lib/badge-url';
import { advertisedStyles, logos } from '../../supported-features.json';

export default class Usage extends React.PureComponent {
  static propTypes = {
    baseUri: PropTypes.string.isRequired,
    longCache: PropTypes.bool.isRequired,
  };

  renderColorExamples () {
    const { baseUri, longCache } = this.props;
    const colors = [
      'brightgreen',
      'green',
      'yellowgreen',
      'yellow',
      'orange',
      'red',
      'lightgrey',
      'blue',
      'ff69b4',
    ];
    return (
      <p>
        { colors.map((color, i) => (
          <Fragment key={i}>
            <img
              className="badge-img"
              src={staticBadgeUrl(baseUri, 'color', color, color, { longCache })}
              alt={color} /> {}
          </Fragment>
        ))}
      </p>
    );
  }

  renderStyleExamples () {
    const { baseUri, longCache } = this.props;
    return (
      <table className="badge-img">
        <tbody>
          { advertisedStyles.map((style, i) => {
            const badgeUri = staticBadgeUrl(
              baseUri,
              'style',
              style,
              'green',
              { longCache, style });
            return (
              <tr key={i}>
                <td>
                  <img className="badge-img" src={badgeUri} alt={style} />
                </td>
                <td>
                  <code>{badgeUri}</code>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }

  static renderNamedLogos() {
    const renderLogo = logo => <span className="nowrap">{logo}</span>;