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

export default function GridExample() {
  return (
    <>
      <section>
        <Row>
          <Col span={24}>
            <Box>col-24</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={12}>
            <Box>col-12</Box>
          </Col>
          <Col span={12}>
            <Box>col-12</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
          <Col span={16}>
            <Box>col-16</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={18}>
            <Box>col-18</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={12}>
            <Box>col-12</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
        </Row>
      </section>
    </>
  );
}

function Box({ children }) {
  return <div className="demo-grid-box">{children}</div>;
}