import './demo11.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tab from '..';
function CustomTabItem({ title, desc, img }) {
    return (React.createElement("div", { className: "custom-tab-item" },
        React.createElement("div", { className: "tab-title" },
            React.createElement("img", { className: "tab-img", src: img }),
            title),
        React.createElement("div", { className: "tab-desc" }, desc)));
}
const panes = [
    {
        key: 'e-checking',
        title: 'Alipay',
        desc: 'The fee to be paid is $15',
        img: 'https://img.alicdn.com/tfs/TB1wra0otTfau8jSZFwXXX1mVXa-80-80.png',
    },
    {
        key: 'brand-card',
        title: 'Bank Card',
        desc: 'The fee to be paid is $17',
        img: 'https://img.alicdn.com/tfs/TB1nKE5s79l0K4jSZFKXXXFjpXa-67-65.png',
    },
];
ReactDOM.render(React.createElement(Tab, { shape: "wrapped", tabRender: (key, props) => React.createElement(CustomTabItem, Object.assign({}, props)) }, panes.map(pane => (React.createElement(Tab.Item, Object.assign({ key: pane.key }, pane, { 
    // @ts-ignore
    tabStyle: { height: '60px' } }), pane.desc)))), document.getElementById('tab-demo-11'));
