import React from "react";
import {
  Card,
  Row,
  Col,
  H3,
  Icon,
  useClassNames,
} from "@tencent/tea-component";

export default function CardExample() {
  const { FontSizeReset } = useClassNames();
  return (
    <div className="example-stage">
      <Card>
        <Card.Body
          title="快速入门"
          operation={<a className={FontSizeReset}>更多</a>}
        >
          <Row>
            <Col span={6}>
              <Item />
            </Col>
            <Col span={6}>
              <Item />
            </Col>
            <Col span={6}>
              <Item />
            </Col>
            <Col span={6}>
              <Item />
            </Col>
          </Row>
        </Card.Body>
      </Card>
    </div>
  );
}

function Item() {
  return (
    <Card bordered>
      <Card.Body>
        <img
          alt="logo"
          src="//mc.qcloudimg.com/static/img/8550e1784df7cb15221a6b5617ba0b4d/Linux.svg"
        />
        <H3>Linux 基础入门</H3>
      </Card.Body>
      <Card.Footer>
        <Row style={{ padding: "8px 20px" }}>
          <Col span={8}>
            <Icon type="monitor" /> 高级
          </Col>
          <Col span={8}>
            <Icon type="pending" /> 3h
          </Col>
          <Col span={8}>
            <Icon type="realname" /> 5.2k
          </Col>
        </Row>
      </Card.Footer>
    </Card>
  );
}