AmirReza Jamali
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
"use client";
|
|
import { HTMLInputTypeAttribute, useState } from "react";
|
|
import { RegisterOptions, UseFormRegister } from "react-hook-form";
|
|
|
|
function InputGroup({
|
|
id,
|
|
label,
|
|
register,
|
|
type,
|
|
validation,
|
|
error,
|
|
placeholder,
|
|
}: {
|
|
label: string;
|
|
id: string;
|
|
register: UseFormRegister<any>;
|
|
type: HTMLInputTypeAttribute;
|
|
validation?: RegisterOptions;
|
|
error?: string;
|
|
placeholder?: string;
|
|
}) {
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
const [hasValue, setHasValue] = useState(false);
|
|
|
|
const { onChange, ...rest } = register(id, validation);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setHasValue(e.target.value !== "");
|
|
onChange(e);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="relative w-full my-3">
|
|
<input
|
|
autoComplete="off"
|
|
type={type}
|
|
className={`border ${
|
|
error
|
|
? "border-red-500"
|
|
: isFocused
|
|
? "border-(--primary)"
|
|
: "border-gray-200"
|
|
} p-2 py-3 rounded-lg w-full outline-none`}
|
|
id={id}
|
|
placeholder={placeholder}
|
|
{...rest}
|
|
onChange={handleChange}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={() => setIsFocused(false)}
|
|
/>
|
|
<label
|
|
htmlFor={id}
|
|
className={`absolute left-3 transition-all duration-200 pointer-events-none bg-white px-1 ${
|
|
isFocused || hasValue
|
|
? "-top-2 text-xs text-gray-600"
|
|
: "top-1/2 -translate-y-1/2 text-base text-gray-400"
|
|
}`}>
|
|
{label}
|
|
<span className="text-red-400">*</span>
|
|
</label>
|
|
</div>
|
|
{error && <p className="text-red-500 text-sm my-3">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InputGroup;
|