import './demo3.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tab from '..';
const tabs = [
  { tab: 'Home', key: 'home', content: 'This is home page' },
  { tab: 'Document', key: 'doc', content: 'This is document page' },
  { tab: 'API', key: 'api', content: 'This is api page' },
];
ReactDOM.render(
  <div>
    <Tab>
      {tabs.map(item => (
        <Tab.Item closeable key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />

    <Tab shape="text">
      {tabs.map(item => (
        <Tab.Item closeable key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <Tab shape="wrapped">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <div style={{ background: '#f7f7f7', padding: '10px' }}>
      <Tab shape="wrapped" theme='grey'>
        {tabs.map(item => (
          <Tab.Item closeable key={item.key} title={item.tab}>
            {item.content}
          </Tab.Item>
        ))}
      </Tab>
    </div>
    <p>全局通栏Tab</p>
    <Tab shape="wrapped" size='large'>
      {tabs.map(item => (
        <Tab.Item closeable key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <Tab size='large'>
      {tabs.map(item => (
        <Tab.Item closeable key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />

    <Tab shape="text" size='large'>
      {tabs.map(item => (
        <Tab.Item closeable key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
  </div>,
  document.getElementById('tab-demo-3'),
);