@appearhere/bloom/components/PhotoGrid/RandomSix.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';

import m from '../../globals/modifiers.css';
import css from './RandomSix.css';

const RandomSix = ({ children, className }) => {
  const {
    0: one,
    1: two,
    2: three,
    3: four,
    4: five,
    5: six,
  } = children;

  return (
    <div className={cx(css.root, className)}>
      <div className={css.row}>
        <div className={cx(css.imageContainer, css.imageContainerLeft)}>
          { one.src && (
            <img className={css.image} src={one.src} alt={one.alt} />
          ) }
        </div>
        <div className={cx(css.imageContainer, css.imageContainerCenter)}>
          { two.src && (
            <img className={css.image} src={two.src} alt={two.alt} />
          ) }
        </div>
        <div className={cx(css.imageContainer, css.imageContainerRight)}>
          { three.src && (
            <img className={css.image} src={three.src} alt={three.alt} />
          ) }
        </div>
      </div>
      <div className={css.row}>
        <div className={cx(css.imageContainer, css.imageContainerLeft, m.valignt)}>
          { four.src && (
            <img className={css.image} src={four.src} alt={four.alt} />
          ) }
        </div>
        <div className={cx(css.imageContainer, css.imageContainerCenter, m.valignt)}>
          { five.src && (
            <img className={css.image} src={five.src} alt={five.alt} />
          ) }
        </div>
        <div className={cx(css.imageContainer, css.imageContainerRight, m.valignt)}>
          { six.src && (
            <img className={css.image} src={six.src} alt={six.alt} />
          ) }
        </div>
      </div>
    </div>

  );
};

RandomSix.propTypes = {
  children: PropTypes.arrayOf(
    PropTypes.shape({
      src: PropTypes.string,
      alt: PropTypes.string,
    })
  ).isRequired,
  className: PropTypes.string,
};

export default RandomSix;