Homeslice Component using semantic UI

HomeSlice.js

import React, { PureComponent } from 'react';
import { Container, Header, Grid, Image} from 'semantic-ui-react';
import './HomeSlice.scss';

export class HomeSlice extends PureComponent {
  render() {
    const {heading, image, context, reverse} = this.props;
    const imageTag = <Image size="large" className="homeSlice--image" src={image}/>;
    const text = context.split('<br />').map((item, key) => {
      return <span key={key}>{item.trim()}<br/></span>;
    });
    let order = [
      { type: 0, element: imageTag, class: 'homeSlice-media' },
      { type: 1, element: text, class: 'homeSlice-context' }
    ];

    if (reverse) {
      order = [
        { type: 1, element: text, class: 'homeSlice-context' },
        { type: 0, element: imageTag, class: 'homeSlice-media' }
      ];
    }

    return (
      <section className="homeSlice">
        <Container type="text">
          <Grid columns={2}>
            <Grid.Row>
              <Grid.Column className={order[0].class} floated='left'>
                {order[0].type === 1 ? <Header as='h2'>{heading}</Header> : ''}
                {order[0].type === 1 ? <Header.Subheader as='p'>{order[0].element}</Header.Subheader> : order[0].element}
              </Grid.Column>
              <Grid.Column className={order[1].class} floated='right'>
                {order[0].type === 0 ? <Header as='h2'>{heading}</Header> : ''}
                {order[0].type === 0 ? <Header.Subheader as='p'>{order[1].element}</Header.Subheader> : order[1].element}
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Container>
      </section>
    );
  }
}

export default HomeSlice;

HomeSlice.scss

.homeSlice {
  .homeSlice-media{
    text-align: right;
  }
  .homeSlice-context {
    top: 50%;
    transform: translateY(-25%);
    vertical-align: middle;

    h2 {
      font-size: 34px;
      font-weight: lighter;
    }

    .sub.header {
      font-size: 18px;
    }
  }
}

usage.js

import image from '../assets/images/some-image.jpg';

<HomeSlice
  heading="Simple and free"
  image={image}
  context="Sub heading"
  reverse={false|true}
/>

# https://cl.ly/lNJo