import './demo8.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tab from '..';
const tabs = [
    { tab: 'Home', key: 0, content: 'This is home page' },
    { tab: 'Document', key: 1, content: 'This is document page' },
    { tab: 'API', key: 2, content: 'This is api page' },
];
function onChange(key) {
    console.log('change', key);
}
function handleClick(key) {
    console.log('click', key);
}
function onMouseEnter(e) {
    console.log('enter', e.target);
}
function onMouseLeave(e) {
    console.log('leave', e.target);
}
ReactDOM.render(React.createElement("div", { className: "fusion-demo" },
    React.createElement("div", { className: "demo-item-title" }, "Click to change"),
    React.createElement(Tab, { triggerType: "click", onChange: onChange }, tabs.map(item => (React.createElement(Tab.Item, { key: item.key, title: item.tab, onClick: handleClick }, item.content)))),
    React.createElement("div", { className: "demo-item-title" }, "Hover to change"),
    React.createElement(Tab, { triggerType: "hover", onChange: onChange }, tabs.map(item => (React.createElement(Tab.Item, { key: item.key, title: item.tab, onClick: handleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, item.content))))), document.getElementById('tab-demo-8'));
