/**
 * title: "前后缀"
 * description: "通过label,innerAfter属性设置前后缀"
 */
import React from 'react';
import { Input } from '@alicloud/console-components';

const titleStyle = {
  margin: '4px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

export default () => {
  return (
    <div style={contentStyle}>
      <div>
        <div style={titleStyle}>前缀</div>
        <Input placeholder="请输入内容" label="+86" />
      </div>
      <div>
        <div style={titleStyle}>后缀</div>
        <Input placeholder="请输入内容" innerAfter="@alibaba-inc.com" />
      </div>
      <div>
        <div style={titleStyle}>前后缀</div>
        <Input
          placeholder="请输入内容"
          label="http://"
          innerAfter="@alibaba-inc.com"
        />
      </div>
    </div>
  );
};