import React from 'react';
import ReactDOM from 'react-dom';
import Tag from '..';
const { Group: TagGroup } = Tag;
const presetColors = ['Red', 'Orange', 'Magenta', 'Purple', 'BluePurple', 'Blue', 'Azure', 'GoldGreen'];
// set custom color with hex value, do not use color keywords
const presetColors2 = [
    { bg: '#eafff0', color: '#29a64e' },
    {
        bg: '#eaf1fe',
        color: '#1c58f4',
    },
    {
        bg: '#fff7e5',
        color: '#feab13',
    },
];
ReactDOM.render(React.createElement("div", { className: "tag-list" },
    React.createElement("h4", null, "primary"),
    React.createElement(TagGroup, null, presetColors.map(color => (React.createElement(Tag, { type: 'primary', key: `p_p_${color}`, color: color }, color)))),
    React.createElement("h4", null, "normal"),
    React.createElement(TagGroup, null, presetColors.map(color => (React.createElement(Tag, { type: 'normal', key: `p_n_${color}`, color: color }, color)))),
    React.createElement("h4", null, "custom colors"),
    React.createElement(TagGroup, null, presetColors2.map(color => (React.createElement(Tag, { key: `p_c_${color.bg}`, type: 'normal', style: { backgroundColor: color.bg, borderColor: color.bg } },
        React.createElement("span", { style: { color: color.color } }, color.color)))))), document.getElementById('tag-demo-4'));
