"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 = ['Red', 'Orange', 'Magenta', 'Purple', 'BluePurple', 'Blue', 'Azure', 'GoldGreen']; // set custom color with hex value, do not use color keywords

var presetColors2 = [{
  bg: '#eafff0',
  color: '#29a64e'
}, {
  bg: '#eaf1fe',
  color: '#1c58f4'
}, {
  bg: '#fff7e5',
  color: '#feab13'
}];

_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", {
  className: "tag-list"
}, /*#__PURE__*/_react["default"].createElement("h4", null, "primary"), /*#__PURE__*/_react["default"].createElement(TagGroup, null, presetColors.map(function (color) {
  return /*#__PURE__*/_react["default"].createElement(_["default"], {
    type: "primary",
    key: "p_p_".concat(color),
    color: color
  }, color);
})), /*#__PURE__*/_react["default"].createElement("h4", null, "normal"), /*#__PURE__*/_react["default"].createElement(TagGroup, null, presetColors.map(function (color) {
  return /*#__PURE__*/_react["default"].createElement(_["default"], {
    type: "normal",
    key: "p_n_".concat(color),
    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_c_".concat(color.bg),
    type: "normal",
    style: {
      backgroundColor: color.bg,
      borderColor: color.bg
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: color.color
    }
  }, color.color));
}))), document.getElementById('tag-demo-4'));