FlexRow.jsx

import React from 'react';
import styled from 'styled-components';

const createGetPosition = end => index => {
  if (index === 0) {
    return 'flex-start'
  } else if (index === end) {
    return 'flex-end'
  } else {
    return 'center'
  }
};

export const FlexRow = ({ children, className }) => {
  const getPosition = createGetPosition(children.length - 1);
  const itemWidth = 100/children.length;

  return (
    <div className={className}>
      { React.Children.map(children, (child, i) =>
        <FlexRowItem
          position={getPosition(i)}
          width={itemWidth}
        >
          { child }
        </FlexRowItem>
      )}
    </div>
  );
};

export const FlexRowItem = styled.div`
  align-items: center;
  display: flex;
  flex-basis: ${props => `${props.width}vw`};
  flex-grow: 1;
  justify-content: ${props => props.position}
`;

export default styled(FlexRow)`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
`;