cluedin-widget/core/components/generics/badge.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { PropTypes } from 'react';
import radium from 'radium';

const badgeStyle = {
  badge: {
    display: 'inline-block',
    minWidth: '10px',
    padding: '3px 7px',
    fontSize: '12px',
    fontWeight: '700',
    lineHeight: '1',
    color: '#fff',
    textAlign: 'center',
    whiteSpace: 'nowrap',
    verticalAlign: 'middle',
    backgroundColor: '#777',
    borderRadius: '10px',
    marginTop: '-1px',
  },
  accent: {
    backgroundColor: '#D81B60',
  },
};

const Badge = (props) => {
  const {
    text,
    style,
  } = props;

  return (
    <span style={[badgeStyle.badge, badgeStyle.accent, style]}>
      {text}
    </span>
  );
};

Badge.propTypes = {
  style: PropTypes.object,
  text: PropTypes.number,
};

export default radium(Badge);