79 lines
2.0 KiB
TypeScript
79 lines
2.0 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";
|
|
error?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
className?: string;
|
|
onChange: (state: string) => void;
|
|
defaultState?: string;
|
|
autocomplete?: string;
|
|
}
|
|
|
|
export const Input: React.FC<inputProps> = ({
|
|
type = "text",
|
|
error = "",
|
|
// disabled = false,
|
|
// required = false,
|
|
label = "",
|
|
placeholder = "",
|
|
className = "",
|
|
onChange,
|
|
defaultState = "",
|
|
name = "",
|
|
autocomplete="",
|
|
}) => {
|
|
const [value, setValue] = React.useState<string>(defaultState);
|
|
const [visible, setVIsible] = React.useState<boolean>(type != "password");
|
|
|
|
React.useEffect(() => onChange(value), [value]);
|
|
|
|
|
|
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]"
|
|
)}
|
|
name={name}
|
|
autoComplete={autocomplete}
|
|
type={type == "password" ? (visible ? "text" : "password") : type}
|
|
placeholder={placeholder}
|
|
onChange={(e) => {
|
|
setValue(e.target.value);
|
|
}} />
|
|
{
|
|
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-[18px] text-right mt-[5px]",
|
|
error == "" && "h-0 mt-0"
|
|
)}>
|
|
{error}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
|
|
};
|