import React from "react";
import {
  Dropdown,
  List,
  StatusTip,
  SearchBox,
  Tabs,
  TabPanel,
  Button,
} from "@tencent/tea-component";

const tabs = [
  { id: "1", label: "选项卡一" },
  { id: "2", label: "选项卡二" },
  { id: "3", label: "选项卡三" },
];

export default function DropdownExample() {
  return (
    <>
      <Dropdown
        button="按钮样式"
        size="m"
        appearance="button"
        matchButtonWidth
        clickClose={false}
        footer={<a>底部内容</a>}
      >
        {close => (
          <>
            <SearchBox simple />
            <List type="option">
              <List.StatusTip>
                <StatusTip status="loading" />
              </List.StatusTip>
              <List.Item onClick={close}>列表项一</List.Item>
              <List.Item onClick={close}>列表项二</List.Item>
              <List.Item onClick={close}>列表项三</List.Item>
            </List>
          </>
        )}
      </Dropdown>
      <Dropdown
        button="按钮样式"
        size="s"
        style={{ marginLeft: 10 }}
        appearance="button"
        clickClose={false}
        footer={<div>底部内容</div>}
      >
        {close => (
          <div
            style={{
              height: 220,
              width: 180,
              padding: 16,
              textAlign: "center",
            }}
          >
            弹出内容
          </div>
        )}
      </Dropdown>
    </>
  );
}