54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import clsx from "clsx";
|
|
import SpinIcon from "./icons/SpinIcon";
|
|
|
|
interface NewInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
placeholder?: string;
|
|
isError?: boolean;
|
|
errorMessage?: string;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
function Input({
|
|
placeholder,
|
|
isError,
|
|
errorMessage,
|
|
isLoading,
|
|
...props
|
|
}: NewInputProps) {
|
|
return (
|
|
<div className={clsx("relative", props.disabled && "opacity-40")}>
|
|
<input
|
|
{...props}
|
|
placeholder=""
|
|
className={clsx(
|
|
isError
|
|
? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
|
|
: "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
|
|
"peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
|
|
)}
|
|
/>
|
|
{placeholder && (
|
|
<span
|
|
className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300
|
|
peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0
|
|
peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0"
|
|
>
|
|
{placeholder + (props.required ? "*" : "")}
|
|
</span>
|
|
)}
|
|
{isError && (
|
|
<p className="caption-s font-medium text-[#FF4517] mt-[0.556vw]">
|
|
{errorMessage}
|
|
</p>
|
|
)}
|
|
{isLoading && (
|
|
<div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
|
|
<SpinIcon />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Input;
|