import React from 'react';
import ReactDOM from 'react-dom';
import Tab from '..';
const panes = [
    {
        tab: 'Todo Tasks',
        key: 0,
    },
    {
        tab: 'Finished Tasks',
        key: 1,
    },
    {
        tab: 'Unread Messages',
        key: 2,
    },
    {
        tab: 'Past Messages',
        key: 3,
    },
    {
        tab: 'All Messages',
        key: 4,
    },
];
const detachedContentStyle = {
    border: '1px solid #DCDEE3',
    padding: '20px',
};
ReactDOM.render(React.createElement("div", { className: "fusion-demo" },
    React.createElement("div", { className: "demo-item-title" }, "Customize with contentStyle or contentClassName"),
    React.createElement(Tab, { shape: "wrapped", contentStyle: detachedContentStyle }, panes.map(pane => (React.createElement(Tab.Item, { title: pane.tab, key: pane.key }, pane.tab)))),
    React.createElement("div", { className: "demo-item-title" }, "Setting className and style in Tab.Item"),
    React.createElement(Tab, { shape: "wrapped", navStyle: { background: '#DEE8FF' } }, panes.map(pane => {
        return (React.createElement(Tab.Item, { title: pane.tab, key: pane.key, className: "custom-tab-item", style: { background: '#FFF' } }, pane.tab));
    })),
    React.createElement("div", { className: "demo-item-title" }, "Tabs with same width"),
    React.createElement(Tab, null, panes.map(pane => (React.createElement(Tab.Item, { title: pane.tab, key: pane.key, className: "justify-tabs-tab" }, pane.tab))))), document.getElementById('tab-demo-10'));
