"use strict";

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _ = _interopRequireDefault(require(".."));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var TagGroup = _["default"].Group;
var presetColors = ['blue', 'green', 'orange', 'red', 'turquoise', 'yellow']; // set custom color with hex value, do not use color keywords

var presetColors2 = [{
  bg: '#FFD4D4',
  color: '#A0260C'
}, {
  bg: '#FFD9D1',
  color: '#C62F0E'
}, {
  bg: '#FFD1E7',
  color: '#C61E6E'
}, {
  bg: '#E5D8FF',
  color: '#7B38F4'
}, {
  bg: '#D1DDFF',
  color: '#6045FF'
}, {
  bg: '#B9E0FF',
  color: '#1B58F4'
}, {
  bg: '#9CF1D9',
  color: '#007855'
}, {
  bg: '#D9D9D9',
  color: '#404040'
}, {
  bg: '#EDEDED',
  color: '#404040'
}];

_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", {
  className: "tag-list"
}, /*#__PURE__*/_react["default"].createElement("h4", null, "preset colors"), /*#__PURE__*/_react["default"].createElement(TagGroup, null, presetColors.map(function (color) {
  return /*#__PURE__*/_react["default"].createElement(_["default"], {
    key: "p_n_".concat(color),
    type: "normal",
    color: color
  }, color);
})), /*#__PURE__*/_react["default"].createElement(TagGroup, null, presetColors.map(function (color) {
  return /*#__PURE__*/_react["default"].createElement(_["default"], {
    key: "p_p_".concat(color),
    type: "primary",
    color: color
  }, color);
})), /*#__PURE__*/_react["default"].createElement("h4", null, "custom colors"), /*#__PURE__*/_react["default"].createElement(TagGroup, null, presetColors2.map(function (color) {
  return /*#__PURE__*/_react["default"].createElement(_["default"], {
    key: "p_n_".concat(color.bg),
    type: "normal",
    color: color.bg
  }, /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: color.color
    }
  }, "\u6807\u7B7E"));
}))), document.getElementById('tag-demo-4'));