import logo from "../assets/react.svg"
import { Dropdown } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons'
const items = [
  {
    key: '1',
    label: (
      <a rel="noopener noreferrer" href="javascript: void(0)">个人中心</a>
    ),
  },
  {
    key: '2',
    label: (
      <a rel="noopener noreferrer" href="javascript: void(0)">设置</a>
    ),
  },
  {
    key: '3',
    label: (
      <a rel="noopener noreferrer" href="/login">退出</a>
    ),
  },
];
export default function Header() {
  const username = JSON.parse(localStorage.getItem('userInfo') || '{}').name || '缺少用户名'
  return (
    <div style={{
      paddingLeft: 30,
      paddingRight: 30,
      display: "flex",
      justifyContent: 'space-between',
      height: 60,
      background: "linear-gradient(90deg, #1a1341 220px, #81c2f1)"
    }}>
      <div className="flex-between-center">
        <img src={logo} style={{ width: 30, height: 30 }} alt="" />
        <span style={{ paddingLeft: 10, fontSize: 18, color: "white" }}>React-Ant Design-Admin</span>
      </div>
      <div className="flex-between-center pointer" style={{ color: 'white' }}>
        <Dropdown menu={{ items }} placement="bottomRight" arrow>
          <span>{username}
            <CaretDownOutlined />
          </span>
        </Dropdown>
      </div>
    </div>
  )
}