import React from "react";
import { Alert, List, Collapse } from "@tencent/tea-component";

export default function AlertComposingExample() {
  return (
    <>
      <Alert>
        <h4 style={{ marginBottom: 8 }}>重要声明</h4>
        <p>本功能将在 2019 年 2 月 29 日下线，请注意做好下列迁移工作：</p>
        <List type="bullet">
          <List.Item>小程序云服务器有奖内测中，即刻成为产品体验官</List.Item>
          <List.Item>
            云服务器限时秒杀，首购1C1G仅需99元/年，还有多款配置供您选择
          </List.Item>
        </List>
      </Alert>
      <Alert type="warning">
        <h4 style={{ marginBottom: 8 }}>重要声明</h4>
        <p>本功能将在 2019 年 2 月 29 日下线，请注意做好下列迁移工作：</p>
        <List type="bullet">
          <List.Item>小程序云服务器有奖内测中，即刻成为产品体验官</List.Item>
          <List.Item>
            云服务器限时秒杀，首购1C1G仅需99元/年，还有多款配置供您选择
          </List.Item>
          <List.Item>
            让企业普惠上云，云服务器最低至2.5折，还有更多产品更低折扣满足您的需求
          </List.Item>
        </List>
        <Collapse iconPosition="right" style={{ marginTop: 8 }}>
          <Collapse.Panel
            id="1"
            title={active => (active ? "收起" : "展开")}
            position="top"
          >
            <List type="bullet" style={{ marginTop: 8 }}>
              <List.Item>更多提示语</List.Item>
              <List.Item>More</List.Item>
            </List>
          </Collapse.Panel>
        </Collapse>
      </Alert>
    </>
  );
}