import * as React from 'react';
import { Menu, Icon } from '@btri-ui/base';
export default () => {
  const IconItems = [
    {
      label: '菜单项一',
      key: 'item-1',
      icon: <Icon iconName="Home" />,
      children: [
        { label: '二级导航', key: 'submenu-item-10' },
        { label: '二级导航', key: 'submenu-item-20' },
        {
          label: '二级导航',
          key: 'submenu-item-30',
          children: [
            { label: '三级导航', key: 'submenu-item-10-1' },
            { label: '三级导航', key: 'submenu-item-20-2' },
            {
              label: '三级导航',
              key: 'submenu-item-30-3',
            },
          ],
        },
      ],
    }, // 菜单项务必填写 key
    {
      label: '菜单项二',
      key: 'item-2',
      icon: <Icon iconName="Home" />,
      children: [
        { label: '二级导航', key: 'submenu-item-11' },
        { label: '二级导航', key: 'submenu-item-21' },
        { label: '二级导航', key: 'submenu-item-31' },
      ],
    },
    {
      label: '菜单项三',
      key: 'item-3',
      icon: <Icon iconName="Home" />,
      children: [
        { label: '二级导航', key: 'submenu-item-12' },
        { label: '二级导航', key: 'submenu-item-22' },
        { label: '二级导航', key: 'submenu-item-32' },
      ],
    },
    {
      label: '菜单项四',
      key: 'item-4',
      icon: <Icon iconName="Home" />,
      children: [
        { label: '二级导航', key: 'submenu-item-13' },
        { label: '二级导航', key: 'submenu-item-23' },
        { label: '二级导航', key: 'submenu-item-33' },
      ],
    },
  ];

  return (
    <div style={{ background: 'var(--bg-1)', padding: '10px' }}>
      <Menu items={IconItems} mode="inline" style={{ width: 240 }} />
    </div>
  );
};