import React from 'react'

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

export default function Demo() {
  return (
    <div>
      <Tabs defaultValue="1" size="large">
        <TabPane name="选项一" value="1">
          <Tabs defaultValue="2">
            <TabPane name="选项一" value="1">
              first
            </TabPane>
            <TabPane name="选中项" value="2">
              second
            </TabPane>
            <TabPane name="选项三" value="3">
              third
            </TabPane>
          </Tabs>
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
      <Divider dashed />
      <Tabs defaultValue="1" type="button" size="large">
        <TabPane name="选项一" value="1">
          <Tabs defaultValue="2" type="button">
            <TabPane name="选项一" value="1">
              first
            </TabPane>
            <TabPane name="选中项" value="2">
              second
            </TabPane>
            <TabPane name="选项三" value="3">
              third
            </TabPane>
          </Tabs>
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
      <Divider dashed />
      <Tabs defaultValue="1" type="vertical" size="large">
        <TabPane name="选项一" value="1">
          <Tabs defaultValue="2" type="button">
            <TabPane name="选项一" value="1">
              first
            </TabPane>
            <TabPane name="选中项" value="2">
              second
            </TabPane>
            <TabPane name="选项三" value="3">
              third
            </TabPane>
          </Tabs>
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
      <Divider dashed />
      <Tabs defaultValue="1" type="vertical" size="large">
        <TabPane name="选项一" value="1">
          <Tabs defaultValue="2" type="vertical">
            <TabPane name="选项一" value="1">
              first
            </TabPane>
            <TabPane name="选中项" value="2">
              second
            </TabPane>
            <TabPane name="选项三" value="3">
              third
            </TabPane>
          </Tabs>
        </TabPane>
        <TabPane name="选中项" value="2">
          second
        </TabPane>
        <TabPane name="选项三" value="3">
          third
        </TabPane>
      </Tabs>
    </div>
  )
}