import React from "react";
import { NavMenu, List, Icon, Badge } from "@tencent/tea-component";

export default function NavMenuExample() {
  return (
    <NavMenu
      left={
        <>
          <NavMenu.Item type="logo">
            <img
              src="https://via.placeholder.com/32.png?text=LOGO"
              alt="logo"
            />
          </NavMenu.Item>
          <NavMenu.Item>总览</NavMenu.Item>
          <NavMenu.Item selected>云服务器</NavMenu.Item>
        </>
      }
      right={
        <>
          <NavMenu.Item
            type="dropdown"
            overlay={close => (
              <List type="option">
                <List.Item onClick={close}>账号信息</List.Item>
                <List.Item className="tea-nav__list-line" onClick={close}>
                  安全设置
                </List.Item>
                <List.Item onClick={close}>退出</List.Item>
              </List>
            )}
          >
            用户名
          </NavMenu.Item>
          <NavMenu.Item type="dropdown" overlay={<div />} selected>
            费用
          </NavMenu.Item>
          <NavMenu.Item>工单</NavMenu.Item>
          <NavMenu.Item type="icon" selected>
            <Icon type="news" />
            <Badge dark theme="danger">
              7
            </Badge>
          </NavMenu.Item>
          <NavMenu.Item type="icon">
            <Icon type="help" />
          </NavMenu.Item>
        </>
      }
    />
  );
}