import React from 'react';
import { Input, Row, Col } from '@btri-ui/base';
import { Select } from '@btri-ui/base';

const BaseInput = () => {
  const { Option } = Select;
  const selectBefore = (
    <Select defaultValue="http://" className="select-before">
      <Option value="http://">http://</Option>
      <Option value="https://">https://</Option>
    </Select>
  )
  return (
    <div>
      <Row autoMode={true}>
        <Col span={4}>
          <Input addonBefore="http://" placeholder="输入文本" />
        </Col>
        <Col span={4}>
          <Input addonBefore={selectBefore} placeholder="输入文本" />
        </Col>
        <Col span={4}>
          <Input addonAfter=".com" placeholder="输入文本" />
        </Col>
        <Col span={4}>
          <Input
            addonBefore="http://"
            addonAfter=".com"
            placeholder="输入文本"
          />
        </Col>
      </Row>
    </div>
  );
};

export default BaseInput;