CarouselNav.jsx

import React, { PropTypes } from 'react';
import styled from 'styled-components';
import back from '../../public/assets/img/back-icon.svg';
import next from '../../public/assets/img/next-icon.svg';

const CarouselNav = ({ headerText, subtitle }) => {
  return (
    <Center>
      <Arrow src={back} align={'left'} />
      <Titles>
        <Title>
          { headerText }
        </Title>
        <Subtitle>
          { subtitle }
        </Subtitle>
      </Titles>
      <Arrow src={next} align={'right'} />
    </Center>
  );
};

CarouselNav.propTypes = {
  headerText: PropTypes.string,
  subtitle: PropTypes.string,
};

const Center = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-transform: capitalize;
  width: 60%;
`;

const Titles = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 6px;
  width: 80%;
`;

const Title = styled.div`
  font-size: 4vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;

const Subtitle = styled.div`
  color: rgba(74, 74, 74, 1);
  font-size: 0.7em;
  font-weight: 100;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;

const Arrow = styled.img`
  text-align: ${props => props.align || 'center'};
  width: 10%;
`;

export default CarouselNav;

NavCenter.jsx

import React, { PropTypes } from 'react';
import styled from 'styled-components';
import CarouselNav from './CarouselNav';
import TitleNav from './TitleNav';

const NavCenter = ({ carousel, title, subtitle }) => {
  return (
    <Center>
      { carousel ?
        <CarouselNav
          headerText={title}
          subtitle={subtitle}
        />
      :
        <TitleNav
          headerText={title}
          subtitle={subtitle}
        />
      }
    </Center>
  );
};

NavCenter.propTypes = {
  carousel: PropTypes.bool,
  title: PropTypes.string,
  subtitle: PropTypes.string,
};

const Center = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-transform: capitalize;
  width: 60%;
`;

export default NavCenter;