import React from "react";
import {
  InputAdornment,
  Input,
  InputNumber,
  Select,
} from "@tencent/tea-component";

export default function InputAdornmentExample() {
  const domainSelect = (
    <Select
      options={["tencent", "qq", "cloud.tencent"].map(value => ({ value }))}
      defaultValue="tencent"
      style={{ width: "auto" }}
    />
  );

  return (
    <>
      <section>
        <InputAdornment before="www.">
          <Input />
        </InputAdornment>
      </section>

      <section>
        <InputAdornment before="$" after=".00">
          <Input size="s" />
        </InputAdornment>
      </section>

      <section>
        <InputAdornment after=".com">{domainSelect}</InputAdornment>
      </section>

      <section>
        <InputAdornment after="Mbps" appearance="pure">
          <InputNumber />
        </InputAdornment>
      </section>
    </>
  );
}