skynet-webportal/packages/dashboard-v2/src/components/TextInputIcon/TextInputIcon.js

import PropTypes from "prop-types";

/**
 * Primary UI component for user interaction
 */
export const TextInputIcon = ({ icon, position, placeholder }) => {
  return (
    <div className={"flex flex-row items-center px-textInputIcon h-textInput rounded-full bg-palette-100"}>
      {position === "left" ? <div className={"w-buttonIconLg h-buttonIconLg"}>{icon}</div> : null}
      <input
        placeholder={placeholder}
        className={
          "w-full focus:outline-none mx-textInputHorizontal rounded-full bg-transparent " +
          "placeholder-palette-400 text-content tracking-inputPlaceholder text-textInput"
        }
      />
      {position === "right" ? <div className={"w-buttonIconLg h-buttonIconLg"}>{icon}</div> : null}
    </div>
  );
};

TextInputIcon.propTypes = {
  /**
   * Icon to place in text input
   */
  icon: PropTypes.element,
  /**
   * Side to place icon
   */
  position: PropTypes.oneOf(["left", "right"]),
  /**
   * Input placeholder
   */
  placeholder: PropTypes.string,
};