feat: input answer title

src/pages/Questions/branchingQuestions.tsx

@@ -1,3 +1,4 @@
+import { useState, useRef, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import {
   Box,
@@ -40,9 +41,16 @@ const CONDITIONS = [
 export default function BranchingQuestions({
   totalIndex,
 }: BranchingQuestionsProps) {
+  const [title, setTitle] = useState<string>("Заголовок работа");
+  const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
   const quizId = Number(useParams().quizId);
   const { openedModalSettings, listQuestions } = questionStore();
   const theme = useTheme();
+  const titleRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setTitleInputWidth(titleRef.current?.offsetWidth || 0);
+  }, [title]);
 
   const handleClose = () => {
     resetSomeField({ openedModalSettings: "" });
@@ -80,7 +88,37 @@ export default function BranchingQuestions({
               display: "flex",
             }}
           >
-            <Typography sx={{ color: "#9A9AAF" }}>()</Typography>
+            <Box sx={{ color: "#9A9AAF" }}>
+              <Typography component="span">(</Typography>
+              <Box sx={{ display: "inline" }}>
+                <Typography
+                  ref={titleRef}
+                  sx={{
+                    position: "absolute",
+                    opacity: 0,
+                    zIndex: "-100",
+                    whiteSpace: "pre",
+                  }}
+                >
+                  {title}
+                </Typography>
+                <input
+                  type="text"
+                  value={title}
+                  onChange={({ target }) => setTitle(target.value)}
+                  style={{
+                    width: titleInputWidth,
+                    outline: "none",
+                    background: "transparent",
+                    border: "none",
+                    fontSize: "18px",
+                    minWidth: "150px",
+                    maxWidth: "500px",
+                  }}
+                />
+              </Box>
+              <Typography component="span">)</Typography>
+            </Box>
             <InfoIcon width={24} height={24} />
           </Box>
           <Box