import React from 'react'

import { TabPane, Tabs, Divider } from 'react-icecream'

export default function Demo() {
  return (
    <div>
      <div style={{ height: '200px', border: '1px solid grey' }}>
        <Tabs defaultValue="1" style={{ height: '100%' }}>
          <TabPane name="选项一" value="1" style={{ color: '#fff', background: '#333' }}>
            TabPane has me scroll, as i overflowed.
            <Divider />
            content
            <Divider />
            content
            <Divider />
            content
            <Divider />
          </TabPane>
          <TabPane name="选项二" value="2" style={{ color: '#fff', background: '#333' }}>
            second
          </TabPane>
          <TabPane name="选项三" value="3" style={{ color: '#fff', background: '#333' }}>
            third
          </TabPane>
        </Tabs>
      </div>
      <Divider />
      <div style={{ width: '200px', border: '1px solid grey', whiteSpace: 'nowrap' }}>
        <Tabs defaultValue="1" type="vertical" style={{ width: '100%' }}>
          <TabPane name="选项一" value="1" style={{ color: '#fff', background: '#333' }}>
            TabPane has me scroll, as i overflowed.
            <Divider />
            content
            <Divider />
            content
            <Divider />
            content
            <Divider />
          </TabPane>
          <TabPane name="选项二" value="2" style={{ color: '#fff', background: '#333' }}>
            second
          </TabPane>
          <TabPane name="选项三" value="3" style={{ color: '#fff', background: '#333' }}>
            third
          </TabPane>
        </Tabs>
      </div>
    </div>
  )
}