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

export default function GridGapExample() {
  const [gap, setGap] = useState(20);

  return (
    <>
      <Slider
        min={0}
        max={50}
        value={gap}
        onUpdate={value => setGap(value)}
        after={
          <InputNumber
            min={0}
            max={50}
            value={gap}
            onChange={value => setGap(value)}
          />
        }
        tipFormatter={value => `间距：${value}`}
      />
      <Row gap={gap}>
        <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>
    </>
  );
}

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