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

2025-07-17 15:50:23 +03:30
parent c88a371eda
commit 278602372d
22 changed files with 144 additions and 34 deletions
@@ -0,0 +1,72 @@
+import OutlinedInput from "@mui/material/OutlinedInput";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import { styleTextSelectRight } from "@/mui";
+import IconMultipleSelect from "@/components/icons/IconMultipleSelect";
+
+export default function MultipleSelect({ value, updateData, name, list }) {
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    const newVal = typeof value === "string" ? value.split(",") : value;
+    updateData(newVal, "value", name);
+  };
+
+  return (
+    <div className="auto-complete-selector w-full">
+      <Select
+        multiple
+        displayEmpty
+        value={value}
+        onChange={handleChange}
+        input={<OutlinedInput />}
+        IconComponent={IconMultipleSelect}
+        className=""
+        sx={{
+          ...styleTextSelectRight,
+          width: "100% !important",
+          "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+          "& .MuiInputBase-root": {
+            borderRadius: 2,
+            padding: "0 !important",
+            height: {
+              xs: "43px !important",
+              sm: "43px !important",
+              md: "46px !important",
+              lg: "48px !important",
+            },
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7",
+          },
+          "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+            {
+              borderColor: "#D7D7D7 !important",
+            },
+          "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+            {
+              border: "1px solid #5559CE !important",
+            },
+        }}
+      >
+        {list.map((item) => (
+          <MenuItem
+            key={item.id || item.uuid}
+            value={item.id}
+            selected={value.includes(item.id)}
+            className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1]
+    ${
+      value.includes(item.id)
+        ? "dark:!bg-[#35343D] !bg-[#F1F1F1]"
+        : "dark:!bg-[#1F1D2B] !bg-[#FFF]"
+    } 
+    hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
+          >
+            {item.name || item.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </div>
+  );
+}