import React, { useState } from 'react';
import { Input, Tree } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';
import { menu } from './test/data';

const TreeNode = Tree.Node;

const SideBar = () => {
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (value: string) => {
    setSearchValue(value);
  };

  return (
    <>
      <Input
        prefix={<IconSearch />}
        placeholder={'搜索'}
        style={{ width: '90%' }}
        value={searchValue}
        onChange={handleSearchChange}
      />

      <Tree
        onSelect={(value, info) => {
          console.log(value, info);
        }}
        onExpand={(keys, info) => {
          console.log(keys, info);
        }}
        treeData={menu}
      >
      </Tree>

    </>
  );
};

export default SideBar;