design and handle modal add, edit and delete in all tabs dashboard & change list & update data profile_other

components/dashboard/userAccount/tabs/allergies/modal/Content.js

@@ -1,24 +1,47 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
 import Field from "@/app/component/Field";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import AutoSelector from "@/app/component/element/AutoSelector";
 
 const listIntensity = [
-  { label: "خفیف" },
-  { label: "متوسط" },
   { label: "شدید" },
+  { label: "متوسط" },
+  { label: "خفیف" },
 ];
 
-function Content() {
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+
   return (
     <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
       <FieldLabel title="ماده آلرژی‌زا">
-        <Field isPlaceHolder={true} title="" type="text" />
+        <Field
+          title=""
+          type="text"
+          name="substance"
+          isPlaceHolder={true}
+          value={data?.substance}
+          handleChange={handleChange}
+        />
       </FieldLabel>
       <FieldLabel title="واکنش">
-        <Field isPlaceHolder={true} title="" type="text" />
+        <Field
+          title=""
+          type="text"
+          name="reaction"
+          isPlaceHolder={true}
+          value={data?.reaction}
+          handleChange={handleChange}
+        />
       </FieldLabel>
       <FieldLabel title="ماده آلرژی‌زا">
-        <AutoCompleteSelect list={listIntensity} label="شدت" />
+        <AutoSelector
+          label="شدت"
+          name="severity"
+          list={listIntensity}
+          value={data?.severity}
+          updateData={handleChange}
+        />
       </FieldLabel>
     </div>
   );