import React from "react";
import {
  Button,
  Blank,
  Card,
  Layout,
  ExternalLink,
  Alert,
  List,
} from "@tencent/tea-component";

const { Body, Content } = Layout;

function BlankCustomExample() {
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Body>
            <Card full>
              <Blank
                theme={{
                  image: {
                    background:
                      "//imgcache.qq.com/open_proj/proj_qcloud_v2/bee-v2/css/img/gif/cloud-dev-bg.png",
                    gif:
                      "//imgcache.qq.com/open_proj/proj_qcloud_v2/bee-v2/css/img/gif/cloud-dev-open.gif",
                  },
                }}
                description="提供什么服务，达到什么目的，文字不超过两行。提供什么服务，达到什么目的，文字不超过两行"
                operation={
                  <>
                    <Button type="primary">前往访问管理</Button>
                    <Button>了解访问管理</Button>
                  </>
                }
                extra={
                  <>
                    <ExternalLink>查看接入流程</ExternalLink>
                    <ExternalLink>查看计价</ExternalLink>
                  </>
                }
              >
                <Alert type="success">成功信息提示语</Alert>
                <Blank.Steps
                  steps={["步骤一内容；", "步骤二内容内容；", "步骤三内容"]}
                />
                <List type="bullet">
                  <List.Item>
                    操作提示一操作提示一操作提示一操作提示一操作提示一
                  </List.Item>
                  <List.Item>
                    操作提示二操作提示二操作提示二操作提示二操作提示二提示二{" "}
                    <ExternalLink>操作提示二</ExternalLink>
                  </List.Item>
                  <List.Item>
                    更多问题，请 <ExternalLink>联系我们</ExternalLink>
                  </List.Item>
                </List>
              </Blank>
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}

export default function Demo() {
  return (
    <section
      style={{
        height: 640,
        border: "1px solid #ddd",
      }}
    >
      <BlankCustomExample />
    </section>
  );
}
