92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
import React from "react";
|
|
|
|
const Input = ({
|
|
id,
|
|
lable,
|
|
name,
|
|
type,
|
|
textarea,
|
|
mt,
|
|
disabled,
|
|
theme,
|
|
inputEvent,
|
|
style,
|
|
value,
|
|
readOnly,
|
|
validator,
|
|
validatorData,
|
|
select,
|
|
selectData,
|
|
}) => {
|
|
return (
|
|
<div
|
|
class={`relative ${mt ? `mt-${mt}` : "mt-8"} ${
|
|
disabled ? "opacity-40" : ""
|
|
}`}
|
|
>
|
|
{textarea ? (
|
|
<textarea
|
|
type="text"
|
|
className={`peer w-full border-b placeholder:text-transparent relative ${
|
|
theme == 1 ? "form-control-white" : "form-control"
|
|
}`}
|
|
placeholder={name}
|
|
disabled={disabled ? true : false}
|
|
readOnly={readOnly ? true : false}
|
|
value={value}
|
|
onChange={inputEvent}
|
|
/>
|
|
) : select ? (
|
|
<select
|
|
className={`peer w-full border-b placeholder:text-transparent relative ${
|
|
theme == 1 ? "form-control-white" : "form-control"
|
|
}`}
|
|
placeholder={name}
|
|
disabled={disabled ? true : false}
|
|
readOnly={readOnly ? true : false}
|
|
value={value}
|
|
onChange={inputEvent}
|
|
>
|
|
{selectData &&
|
|
selectData.map((e) => (
|
|
<option value={e.id}>{e.persianName}</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<input
|
|
type={type}
|
|
id={id}
|
|
className={`peer w-full border-b placeholder:text-transparent ${
|
|
theme == 1 ? "form-control-white" : "form-control"
|
|
} ${style ? style : ""} relative`}
|
|
placeholder={name}
|
|
disabled={disabled ? true : false}
|
|
readOnly={readOnly ? true : false}
|
|
value={value}
|
|
onChange={inputEvent}
|
|
/>
|
|
)}
|
|
|
|
<div className="flex justify-start w-full absolute mt-[-2px]">
|
|
<small className="absolute ">
|
|
{" "}
|
|
{validator ? <>{validatorData}</> : ""}
|
|
</small>
|
|
</div>
|
|
|
|
<label
|
|
htmlFor={id}
|
|
className={`absolute right-0 mr-3 px-1 -translate-y-3 ${
|
|
theme == 1 ? "bg-white" : "bg-body-100"
|
|
} text-sm duration-100 ease-linear peer-placeholder-shown:translate-y-[15px] peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:mr-6 peer-focus:-translate-y-3 peer-focus:px-1 peer-focus:text-sm`}
|
|
>
|
|
{lable}
|
|
</label>
|
|
|
|
{/* <small>رمز اشتباه</small> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Input;
|