import React from "react";
import { ContentView, Card, Text, ExternalLink } from "@tencent/tea-component";

export default function ContentViewExample() {
  return (
    <MockLayout>
      <ContentView>
        <ContentView.Header
          showBackButton
          onBackButtonClick={console.log}
          title="内容标题"
          subtitle={
            <>
              说明文字 <Text theme="label">带颜色说明文字</Text>
            </>
          }
          operation={<ExternalLink weak>内容帮助</ExternalLink>}
        />
        <ContentView.Body>
          {/* 内容区域一般使用 Card 组件显示内容 */}
          <Card>
            <Card.Body>内容卡片</Card.Body>
          </Card>
        </ContentView.Body>
      </ContentView>
    </MockLayout>
  );
}

/**
 * 模拟控制台布局，在控制台使用的时候无需这部分，只要保留 ContentView 即可
 */
function MockLayout({ children }) {
  return (
    <div style={{ height: 340 }}>
      <header style={{ height: 40, background: "#262626" }} />
      <aside
        style={{ float: "left", height: 300, width: 200, background: "#333" }}
      />
      <main style={{ marginLeft: 200, height: 300 }}>{children}</main>
      <div style={{ clear: "left" }} />
    </div>
  );
}