99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '../../lib/cn';
|
|
import { eyeClosed, eyeOpen } from '../../assets/icons/input';
|
|
|
|
interface inputProps {
|
|
name?: string;
|
|
type: 'text' | 'email' | 'password' | 'first_name' | 'number';
|
|
error?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
className?: string;
|
|
inputClassName?: string;
|
|
onChange: (state: string) => void;
|
|
defaultState?: string;
|
|
autocomplete?: string;
|
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export const Input: React.FC<inputProps> = ({
|
|
type = 'text',
|
|
error = '',
|
|
// disabled = false,
|
|
// required = false,
|
|
label = '',
|
|
placeholder = '',
|
|
className = '',
|
|
inputClassName = '',
|
|
onChange,
|
|
defaultState = '',
|
|
name = '',
|
|
autocomplete = '',
|
|
onKeyDown,
|
|
}) => {
|
|
const [value, setValue] = React.useState<string>(defaultState);
|
|
const [visible, setVIsible] = React.useState<boolean>(type != 'password');
|
|
|
|
React.useEffect(() => onChange(value), [value]);
|
|
React.useEffect(() => setValue(defaultState), [defaultState]);
|
|
|
|
return (
|
|
<div className={cn('relative', className)}>
|
|
<div
|
|
className={cn(
|
|
'text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all',
|
|
label == '' && 'h-0 mb-0',
|
|
)}
|
|
>
|
|
{label}
|
|
</div>
|
|
<div className="relative">
|
|
<input
|
|
className={cn(
|
|
'bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light',
|
|
type == 'password' ? 'h-[40px]' : 'h-[36px]',
|
|
inputClassName,
|
|
)}
|
|
value={value}
|
|
name={name}
|
|
autoComplete={autocomplete || undefined}
|
|
type={
|
|
type == 'password'
|
|
? visible
|
|
? 'text'
|
|
: 'password'
|
|
: type
|
|
}
|
|
placeholder={placeholder}
|
|
onChange={(e) => {
|
|
setValue(e.target.value);
|
|
}}
|
|
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (onKeyDown) onKeyDown(e);
|
|
}}
|
|
/>
|
|
{type == 'password' && (
|
|
<img
|
|
src={visible ? eyeOpen : eyeClosed}
|
|
className="w-[24px] h-[24px] cursor-pointer right-[16px] top-[8px] absolute"
|
|
onClick={() => {
|
|
setVIsible(!visible);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
'text-liquid-red text-[14px] h-auto text-right mt-[5px] whitespace-pre-line ',
|
|
error == '' && 'h-0 mt-0',
|
|
)}
|
|
>
|
|
{error}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|