feat: OptionsPicture upload pictures

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -1,36 +1,48 @@
-import { Box, Link, Typography, useTheme } from "@mui/material";
-import React from "react";
+import { useState } from "react";
+import { Box, Link, Typography, Button, useTheme } from "@mui/material";
+
+import ButtonsOptions from "../ButtonsOptions";
+import { questionStore, updateQuestionsList } from "@root/questions";
+
 import EnterIcon from "../../../assets/icons/questionsPage/enterIcon";
 import AddImage from "../../../assets/icons/questionsPage/addImage";
-import ButtonsOptions from "../ButtonsOptions";
 import SwitchAnswerOptionsPict from "./switchOptionsPict";
+
+import type { ChangeEvent } from "react";
+
 interface Props {
   totalIndex: number;
 }
+
 export default function OptionsPicture({ totalIndex }: Props) {
   const theme = useTheme();
-  const [switchState, setSwitchState] = React.useState("setting");
-  // const [addInput, setAddInput] = React.useState([
-  //     0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]};
-  // ]);
+  const [switchState, setSwitchState] = useState("setting");
+  const { listQuestions } = questionStore();
+
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
 
-  // const createCondition = (name) => {
-  //     addInput([...state, {name: name}])
-  // }
-  //
-  // const deleteCondition = (index) => {
-  //
-  // }
+  const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    if (target.files?.length) {
+      const clonContent = listQuestions[totalIndex].content;
+
+      clonContent.images.push(URL.createObjectURL(target.files[0]));
+
+      updateQuestionsList(totalIndex, { content: clonContent });
+    }
+  };
+
   return (
     <>
       <Box sx={{ padding: "20px" }}>
         <Box
           sx={{ display: "flex", alignItems: "center", paddingBottom: "25px" }}
         >
-          <AddImage />
+          <Button component="label" sx={{ padding: "0px" }}>
+            <AddImage />
+            <input type="file" hidden onChange={addImage} />
+          </Button>
           <Typography
             sx={{
               padding: "0 0 0 20px",