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

Xchain Components

/* eslint react/jsx-filename-extension: 0 */
import * as React from 'react';
import { Label } from 'semantic-ui-react';
import XDisplayText from 'components/XDisplayText';

type Props = {
  borderColor?: string,
  backgroundColor?: string,
  textColor?:string,
  circular?: boolean,
  text?: string,
  height?: string,
  width?: string,
  floating?:boolean,
  letterSpacing?: string,
  fontSize?: string,
  fontWeight?: string,
};

const XLabel = (props: Props) => {
  const {
    borderColor,
    circular, backgroundColor, textColor, height, width, text, letterSpacing, fontSize, fontWeight,
  } = props;
  return (
    <Label
      style={{
        height,
        width,
        border: `solid 1px ${borderColor}`,
        backgroundColor,
        color: textColor,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      circular={circular}
    >
      <XDisplayText
        displayText={text}
        fontSize={fontSize}
        letterSpacing={letterSpacing}
        fontWeight={fontWeight}
      />
    </Label>
  );
};
XLabel.defaultProps = {
  height: '32px',
  width: '140px',
  borderColor: 'transparent',
  backgroundColor: '#e6ebf2',
  circular: false,
  textColor: '#000000',
  floating: true,
  text: '',
  fontSize: '16px',
  letterSpacing: 'normal',
  fontWeight: 'normal',
};
export default XLabel;