Spaces:
Sleeping
Sleeping
File size: 1,429 Bytes
d092f57 74486d1 d092f57 74486d1 d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 74486d1 d092f57 ce09e2f d092f57 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import { FC, useRef } from "react"
import IconClose from "../icon/IconClose"
import classNames from "classnames"
interface Props {
value: string
placeholder: string
onChange: (value: string) => void
required?: boolean
className?: string
icon?: any
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
}
const InputText: FC<Props> = ({
value,
onChange,
placeholder,
icon,
className = "",
required = false,
onKeyDown,
}) => {
const inputRef = useRef<HTMLInputElement>(null)
return (
<div
className={classNames(
"rounded-lg grow flex flex-row items-center bg-dark-800 border border-dark-700/50 focus-within:border-primary-500/50 transition-all duration-200",
className
)}
>
{icon && <div className={"ml-2"}>{icon}</div>}
<input
ref={inputRef}
size={1}
className={"grow rounded-lg bg-transparent px-3 py-2.5 outline-none " + className}
placeholder={placeholder}
value={value}
onChange={(event) => onChange(event.target.value)}
type={"text"}
required={required}
onFocus={() => inputRef.current?.select()}
onKeyDown={onKeyDown}
/>
{value && (
<div className={"p-2 cursor-pointer hover:text-red-400 transition-colors"} onClick={() => onChange("")}>
<IconClose />
</div>
)}
</div>
)
}
export default InputText
|