import React, { useState } from "react";
import { SearchBox, Switch } from "@tencent/tea-component";

export default function SearchBoxExample() {
  const [multiline, setMultiline] = useState(false);
  const [showHelp, setShowHelp] = useState(false);
  return (
    <>
      <section>
        <SearchBox
          showHelp={showHelp}
          multiline={multiline}
          onSearch={console.log}
          onClear={() => console.log("clear")}
          onHelp={() => console.log("help")}
        />
      </section>
      <hr />
      <section>
        <Switch value={multiline} onChange={value => setMultiline(value)}>
          多行搜索
        </Switch>
        <Switch value={showHelp} onChange={value => setShowHelp(value)}>
          显示帮助按钮
        </Switch>
      </section>
    </>
  );
}