change function of fliter sort, modal and locate set new data and change it and update

components/doctors/modal/form/index.js

@@ -6,47 +6,47 @@ import CateSelector from "./CateSelector";
 const gender = ["زن", "مرد", "هر دو"];
 const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
 
-function Form({ data, changeData }) {
-  const { parentList, childrenList } = filterList(data);
+function Form({ filter, changeSpecialty, updateData }) {
+  const { parentList, childrenList } = filterList(filter);
 
   return (
     <>
       <CateSelector
+        name="category"
         list={parentList}
         label="دسته بندی"
-        value={data.category}
-        updateData={(value) => changeData(value, "category", true, "specialty")}
+        value={filter.category}
+        updateData={changeSpecialty}
       />
-      {!!childrenList.length && (
-        <div className="mt-[24px]">
-          <CateSelector
-            list={childrenList}
-            updateData={(value) =>
-              changeData(value, "specialties", false, "specialty")
-            }
-            value={data.specialties}
-            label="تخصص"
-          />
-        </div>
-      )}
+      <div
+        className={`${!!childrenList.length ? "max-h-32 mt-[24px]" : "max-h-0 mt-0"} overflow-hidden transition-all duration-500`}
+      >
+        <CateSelector
+          name="specialty"
+          list={childrenList}
+          updateData={updateData}
+          value={filter.specialty}
+          label="تخصص"
+        />
+      </div>
       <div className="mt-[40px] mb-[32px]">
         <RadioContent
-          changeData={changeData}
-          value={data.gender}
+          updateData={updateData}
+          value={filter.gender}
           text="جنسیت پزشک"
           group={gender}
           name="gender"
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
         <RadioContent
-          changeData={changeData}
-          value={data.degree}
+          updateData={updateData}
+          value={filter.degree}
           text="درجه علمی"
           group={degree}
           name="degree"
         />
         <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
-        <SwitchContent data={data} changeData={changeData} />
+        <SwitchContent filter={filter} updateData={updateData} />
       </div>
     </>
   );