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="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"> <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", }, ], };