import { Input } from 'antd';
import { SearchOutlined } from '@easyv/react-icons';
import { useRecoilState } from 'recoil';
import { _componenterSearchQuery } from '@/pages/ProjectEditor/module';

export default function TreeSearch() {
  const [searchQuery, setSearchQuery] = useRecoilState(_componenterSearchQuery);

  return (
    <div className="p-2 flex gap-x-2 h-10 w-full">
      <span className="flex-auto">
        <Input
          allowClear
          prefix={<SearchOutlined className="anticon" />}
          placeholder="搜索元件名称"
          size="small"
          value={searchQuery.name}
          onChange={(e) => setSearchQuery({ ...searchQuery, name: e.target.value })}
        />
      </span>
    </div>
  );
}