change component folders && add multipleselector && send img of doctor page && send skills to create doctor item

app/component/fields/EditField.js

@@ -0,0 +1,71 @@
+import EditGrayA from "@/components/icons/EditGrayA";
+import EditOrangeA from "@/components/icons/EditOrangeA";
+import { Button, TextField } from "@mui/material";
+
+function EditField({
+  changeData,
+  multiline,
+  icon,
+  placeholder,
+  data,
+  name,
+  iconGray,
+  isTransparent,
+  noDisable,
+  type,
+  props,
+}) {
+  return (
+    <div className="relative w-full">
+      <TextField
+        {...props}
+        rows={multiline}
+        multiline={multiline}
+        type={type || "text"}
+        value={data?.value || ""}
+        placeholder={placeholder || ""}
+        disabled={noDisable ? false : !data?.isEdit}
+        className={`!w-full res-field-account dark:!bg-transparent ${
+          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
+        }`}
+        onChange={(e) => {
+          changeData(e.target.value, "value", name);
+        }}
+        sx={{
+          "& .MuiFormLabel-root": {
+            top: "-4px !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7 !important",
+          },
+          "& .MuiInputBase-root": {
+            padding: "0 !important",
+            borderRadius: "8px !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #5559CE !important",
+              transition: "0.5s all",
+            },
+          },
+          "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+            {
+              display: "none",
+            },
+        }}
+      />
+      <Button
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
+        // onClick={() => {
+        // changeData(!data.isEdit, "isEdit", name);
+        // }}
+      >
+        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
+      </Button>
+    </div>
+  );
+}
+
+export default EditField;

app/component/fields/Field.js

@@ -0,0 +1,51 @@
+import { TextField } from "@mui/material";
+
+function Field({
+  type,
+  name,
+  title,
+  props,
+  value,
+  multiline,
+  handleChange,
+  isPlaceHolder,
+}) {
+  return (
+    <TextField
+      {...props}
+      size="small"
+      defaultValue={value || ""}
+      type={type || "text"}
+      multiline={!!multiline}
+      rows={!!multiline ? 4 : 1}
+      label={!isPlaceHolder ? title : ""}
+      placeholder={isPlaceHolder && title}
+      className="!w-full !mx-auto !bg-[#FFF]"
+      onChange={(e) => {
+        handleChange(name || "", e.target.value);
+      }}
+      sx={{
+        "& .MuiFormLabel-root": {
+          top: "-4px !important",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px" },
+        "& .MuiInputBase-root": { borderRadius: "6px !important" },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #E9ECEF !important",
+        },
+        ".Mui-focused": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #5559CE !important",
+            transition: "0.5s all",
+          },
+        },
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+      }}
+    />
+  );
+}
+
+export default Field;

app/component/fields/FieldIcon.js

@@ -0,0 +1,42 @@
+import EditGrayA from "@/components/icons/EditGrayA";
+import EditOrangeA from "@/components/icons/EditOrangeA";
+import { Button, TextField } from "@mui/material";
+
+function FieldIcon({ changeData, icon, placeholder, name }) {
+  return (
+    <div className="relative w-full">
+      <TextField
+        placeholder={placeholder || ""}
+        type="text"
+        className="!w-full"
+        onChange={(e) => {
+          changeData(e.target.value, name);
+        }}
+        sx={{
+          "& .MuiFormLabel-root": {
+            top: "-4px !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7 !important",
+          },
+          "& .MuiInputBase-root": {
+            padding: "0 !important",
+            borderRadius: "8px !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #5559CE !important",
+              transition: "0.5s all",
+            },
+          },
+        }}
+      />
+      <Button className="!absolute !top-1/2 !left-[8px] !-translate-y-1/2 !min-w-fit !p-1">
+        {icon}
+      </Button>
+    </div>
+  );
+}
+
+export default FieldIcon;