import * as React from 'react';
import { Col, Row, Menu, Icon } from '@btri-ui/base';
export default () => {
  const IconItems = [
    {
      label: '菜单项一',
      key: 'item-1',
      icon: <Icon iconName="Home" />,
      href: '#1',
    }, // 菜单项务必填写 key
    {
      label: '菜单项二',
      key: 'item-2',
      icon: <Icon iconName="Home" />,
      href: '#2',
    },
    {
      label: '菜单项三',
      key: 'item-3',
      icon: <Icon iconName="Home" />,
      href: '#3',
    },
    {
      label: '菜单项四',
      key: 'item-4',
      icon: <Icon iconName="Home" />,
      href: '#4',
    },
    {
      label: '菜单项五',
      key: 'item-5',
      icon: <Icon iconName="Home" />,
      href: '#5',
    },
    {
      label: '菜单项六',
      key: 'item-6',
      icon: <Icon iconName="Home" />,
      href: '#6',
    },
    {
      label: '菜单项七',
      key: 'item-7',
      icon: <Icon iconName="Home" />,
      href: '#7',
    },
    {
      label: '菜单项八',
      key: 'item-8',
      icon: <Icon iconName="Home" />,
      href: '#8',
    },
  ];
  const Items = [
    { label: '菜单项一', key: 'item-1', href: '#1' }, // 菜单项务必填写 key
    { label: '菜单项二', key: 'item-2', href: '#2' },
    { label: '菜单项三', key: 'item-3', href: '#3' },
    { label: '菜单项四', key: 'item-4', href: '#4' },
    { label: '菜单项五', key: 'item-5', href: '#5' },
    { label: '菜单项六', key: 'item-6', href: '#6' },
    { label: '菜单项七', key: 'item-7', href: '#7' },
    { label: '菜单项八', key: 'item-8', href: '#8' },
  ];

  return (
    <div style={{ background: 'var(--bg-1)', padding: '10px' }}>
      <Row autoMode={true}>
        <Col span={6}>
          <Menu items={Items} mode="inline" />
        </Col>
        <Col span={6}>
          <Menu items={IconItems} mode="inline" />
        </Col>
      </Row>
    </div>
  );
};