36 lines
1015 B
JavaScript
36 lines
1015 B
JavaScript
|
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,
|
||
|
|
}
|