You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.1 KiB
110 lines
3.1 KiB
import React, { useState } from "react"; |
|
import { useForm } from "react-hook-form"; |
|
|
|
import DateRangePicker from "../DateRangePicker"; |
|
import Input from "../AnimatedInput/Input"; |
|
import CustomSelectBox from "../CustomSelectBox"; |
|
|
|
const FormInput = ({ items }) => { |
|
const { register, getValues } = useForm(); |
|
|
|
const [selectedInput, setSelectedInput] = useState(false); |
|
|
|
return ( |
|
<div className="h-96 mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm"> |
|
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
|
<Input |
|
register={register("firstName")} |
|
// defaultValue={info?.firstName} |
|
label="نام " |
|
type="text" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
// borderClassname={` ${ |
|
// selectedInput === true ? "border-[#2483E1]" : "border-[#E0E0E0]" |
|
// }`} |
|
// onClick={() => setSelectedInput(true)} |
|
/> |
|
<Input |
|
register={register("lastName")} |
|
label="نام خانوادگی" |
|
type="text" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
<Input |
|
register={register("birthYear")} |
|
label="تاریخ تولد" |
|
type="number" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
<CustomSelectBox /> |
|
<Input |
|
register={register("gender")} |
|
label="جنسیت" |
|
type="number" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
</div> |
|
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
|
<Input |
|
register={register("mobileNumber")} |
|
label="شماره تماس" |
|
type="number" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
<Input |
|
register={register("job")} |
|
label="شغل" |
|
type="text" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
<CustomSelectBox options={items} /> |
|
<Input |
|
register={register("foundus")} |
|
label="نحوه آشنایی با موکب" |
|
type="text" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
<Input |
|
register={register("idCard")} |
|
label="کد ملی" |
|
type="number" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> |
|
</div> |
|
<div className="flex-grow flex-1 flex flex-col px-4 justify-between"> |
|
{/* <Input |
|
register={register("lastName")} |
|
label="تاریخ ورود" |
|
type="text" |
|
borderClassname={`border-transparent `} |
|
className={``} |
|
/> */} |
|
<DateRangePicker /> |
|
</div> |
|
</div> |
|
); |
|
}; |
|
|
|
export default FormInput; |
|
|
|
FormInput.defaultProps = { |
|
items: [ |
|
{ |
|
title: "mahdi", |
|
}, |
|
{ |
|
title: "mahdi", |
|
}, |
|
{ |
|
title: "mahdi", |
|
}, |
|
], |
|
};
|
|
|