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

export default function GridAlignExample() {
  const [align, setAlign] = useState(null);

  return (
    <>
      <section>
        <RadioGroup value={align} onChange={value => setAlign(value)}>
          <Radio name={null}>默认等高</Radio>
          <Radio name="top">顶部对齐</Radio>
          <Radio name="middle">居中对齐</Radio>
          <Radio name="bottom">底部对齐</Radio>
        </RadioGroup>
      </section>
      <Row verticalAlign={align}>
        <Col span={8}>
          <div style={{ height: "100%", background: "gray" }}>
            <Box>col-8</Box>
            <Box>col-8</Box>
          </div>
        </Col>
        <Col span={8}>
          <div style={{ height: "100%", background: "gray" }}>
            <Box>col-8</Box>
          </div>
        </Col>
        <Col span={8}>
          <div style={{ height: "100%", background: "gray" }}>
            <Box>col-8</Box>
            <Box>col-8</Box>
            <Box>col-8</Box>
          </div>
        </Col>
      </Row>
    </>
  );
}

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