xchain-components/src/components/XDivider/index.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import * as React from 'react';
import { Divider } from 'semantic-ui-react';
import XDisplayText from 'components/XDisplayText';

type Props = {
  width?: string,
  height?: string,
  vertical?: boolean,
  text?: string,
  margin?: string,
};

const XDivider = (props: Props) => {
  const {
    width, height, vertical, text, margin,
  } = props;
  return (
    <Divider
      style={{
        width,
        height,
        margin,
      }}
      vertical={vertical}
      fitted
    >
      {
      text !== ''
        ? (
          <XDisplayText displayText={text} fontSize="16px" />
        ) : null
    }
    </Divider>
  );
};

XDivider.defaultProps = {
  width: '70px',
  height: '50px',
  vertical: false,
  text: '',
  margin: '0',
};

export default XDivider;