create files tag answer

src/assets/styles/components/previewModal.module.scss

@@ -1,5 +1,7 @@
 .myModal {
+
     &__dialog {
+        
         &__content {
             // padding: 2%;
             &__header {
@@ -15,6 +17,28 @@
                     font-size: 17px;
                 }
             }
+            &__body {
+                padding: 0;
+                &__item {
+                    padding: 10px 20px;
+                    border-top: 1px solid rgb(200, 200, 200);
+                    &__question {
+                        &__text {
+                            font-size: 15px;
+                            font-family: "Montserrat", sans-serif;
+                        }
+                        &__comment {
+                            font-size: 11px;
+                            font-family: "Montserrat", sans-serif;
+                            font-style: italic;
+                            color: rgb(200, 200, 200);
+                        }
+                    }
+                    &__answer {
+
+                    }
+                }
+            }
         }
     }
 }

src/assets/styles/components/typeAnswer/inputText.module.scss

@@ -0,0 +1,14 @@
+.main {
+    width: 100%;
+    input {
+        width: 100%;
+        font-size: 15px;
+        font-family: "Montserrat", sans-serif;
+        border: 1px solid rgb(200, 200, 200);
+        color: rgb(50, 50, 50);
+        padding: 1%;
+        &::placeholder {
+            color: rgb(200, 200, 200);
+        }
+    }
+}

src/components/AnswerModal.jsx

@@ -8,7 +8,7 @@ const AnswerModal = ({
     updateAnswerByForm,
     stateModal,
     saveStates, 
-    answer, 
+    question, 
     file,
     listTypeAnswer,
     optionAnswer,
@@ -20,7 +20,7 @@ const AnswerModal = ({
     mandatory,
     setMandatory,
     addOptionAnswer,
-    setAnswer,
+    setQuestion,
     setComment,
     setDatetime,
     setCurrentTypeAnswer,
@@ -43,7 +43,7 @@ const AnswerModal = ({
                     <div class="modal-body" className={classes.myModal__dialog__content__body}>
                         <div className={classes.myModal__dialog__content__body__answer}>
                             <span className={classes.myModal__dialog__content__body__answer__title}>Вопрос</span>
-                            <textarea className={classes.myModal__dialog__content__body__answer__text} value={answer} onChange={event => setAnswer(event.target.value)}></textarea>
+                            <textarea className={classes.myModal__dialog__content__body__answer__text} value={question} onChange={event => setQuestion(event.target.value)}></textarea>
                             <input 
                                 type="file" 
                                 multiple 

src/components/PreviewModal.jsx

@@ -1,10 +1,9 @@
 import React from "react";
 import classes from "../assets/styles/components/previewModal.module.scss";
-// import MyButton from "./MyButton.jsx";
 
-const PreviewModal = () => {
+const PreviewModal = ({newForm, listTypeAnswer}) => {
     return (
-        <div class="modal fade" className={classes.myModal} id="previewModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
+        <div class="modal fade modal-lg" className={classes.myModal} id="previewModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
             <div class="modal-dialog" className={classes.myModal__dialog}>
                 <div class="modal-content" className={classes.myModal__dialog__content}>
                     <div class="modal-header" className={classes.myModal__dialog__content__header}>
@@ -12,7 +11,19 @@ const PreviewModal = () => {
                         <i class="fa-solid fa-xmark" data-bs-dismiss="modal" aria-label="Close"></i>
                     </div>
                     <div class="modal-body" className={classes.myModal__dialog__content__body}>
-                        
+                        {newForm.map((item, i) => 
+                            <div className={classes.myModal__dialog__content__body__item} key={i}>
+                                <div className={classes.myModal__dialog__content__body__item__question}>
+                                    <p className={classes.myModal__dialog__content__body__item__question__text}>{i + 1}) {item.question}</p>
+                                    <p className={classes.myModal__dialog__content__body__item__question__comment}>{item.comment}</p>
+                                </div>
+                                <div className={classes.myModal__dialog__content__body__item__answer}>
+                                    {
+                                        listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({text: '55555'})
+                                    }
+                                </div>
+                            </div>
+                        )} 
                     </div>
                     <div class="modal-footer" className={classes.myModal__dialog__content__footer}>
 

src/components/typeAnswer/InputText.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import classes from "../../assets/styles/components/typeAnswer/inputText.module.scss"
+
+const InputText = (props) => {
+    return (
+        <div className={classes.main}>
+            <input type="text" placeholder={"Ответ"}/>
+        </div>
+    )
+}
+
+export default InputText;

src/pages/NewForm.jsx

@@ -5,6 +5,7 @@ import MyButton from "../components/MyButton.jsx";
 import AnswerModal from "../components/AnswerModal.jsx";
 import PreviewModal from "../components/PreviewModal.jsx"
 import { FormsData } from "../context";
+import InputText from "../components/typeAnswer/InputText.jsx"
 
 const NewForm = () => {
     const navigate = useNavigate();
@@ -17,7 +18,7 @@ const NewForm = () => {
     const nextID = (list) => {
         return list.length ? list.at(-1).id + 1 : 1
     };
-    const [answer, setAnswer] = useState("");
+    const [question, setQuestion] = useState("");
     const [comment, setComment] = useState("");
     const [datetime, setDatetime] = useState("");
     const [mandatory, setMandatory] = useState(false);
@@ -31,14 +32,14 @@ const NewForm = () => {
     const [stateModal, setStateModal] = useState(false)
 
     const [listTypeAnswer, setListTypeAnswer] = useState([
-        {id: 1, text: 'Краткий ответ'},
+        {id: 1, text: 'Краткий ответ', typeTag: InputText},
-        {id: 2, text: 'Расширенный ответ'},
+        {id: 2, text: 'Расширенный ответ', typeTag: InputText},
-        {id: 3, text: 'Выбор из вариантов'},
+        {id: 3, text: 'Выбор из вариантов', typeTag: InputText},
-        {id: 4, text: 'Множественный выбор'},
+        {id: 4, text: 'Множественный выбор', typeTag: InputText},
-        {id: 5, text: 'Выпадающий список'},
+        {id: 5, text: 'Выпадающий список', typeTag: InputText},
-        {id: 6, text: 'Да/Нет'},
+        {id: 6, text: 'Да/Нет', typeTag: InputText},
-        {id: 7, text: 'Файл'},
+        {id: 7, text: 'Файл', typeTag: InputText},
-        {id: 8, text: 'Дата'}
+        {id: 8, text: 'Дата', typeTag: InputText}
     ]);
 
     function removeAnswerByForm(id) {
@@ -47,7 +48,7 @@ const NewForm = () => {
 
     function cleanStates() {
         setStateModal(false)
-        setAnswer("");
+        setQuestion("");
         setComment("");
         setDatetime("");
         setOptionAnswer([])
@@ -67,7 +68,7 @@ const NewForm = () => {
 
     function editAnswerByForm(id) {       
         const obj = newForm.find(item => item.id === id);
-        setAnswer(obj.answer);
+        setQuestion(obj.question);
         setComment(obj.comment);
         setDatetime(obj.datetime);
         setFile(obj.file);
@@ -80,7 +81,7 @@ const NewForm = () => {
     function updateAnswerByForm() {
         setNewForm(newForm.map(item => {
             if (item.id === stateModal) {
-                item.answer = answer;
+                item.question = question;
                 item.comment = comment;
                 item.datetime = datetime;
                 item.file = file;
@@ -96,7 +97,7 @@ const NewForm = () => {
     function saveStates() {
         setNewForm([...newForm, {
             id: nextID(newForm),
-            answer: answer,
+            question: question,
             typeAnswer: currentTypeAnswer,
             comment: comment,
             datetime: datetime,
@@ -157,12 +158,12 @@ const NewForm = () => {
                         </div>
                     </div>
 
-                    <PreviewModal />
+                    <PreviewModal newForm={newForm} listTypeAnswer={listTypeAnswer}/>
 
                     <AnswerModal 
                         stateModal={stateModal}
                         currentTypeAnswer={currentTypeAnswer} 
-                        answer={answer}
+                        question={question}
                         comment={comment}
                         mandatory={mandatory}
                         optionAnswer={optionAnswer}
@@ -171,7 +172,7 @@ const NewForm = () => {
                         file={file}
                         currentOptionAnswer={currentOptionAnswer}
                         listTypeAnswer={listTypeAnswer}
-                        setAnswer={setAnswer}
+                        setQuestion={setQuestion}
                         setComment={setComment}
                         setDatetime={setDatetime}
                         setFile={setFile}
@@ -220,7 +221,7 @@ const NewForm = () => {
                                     }}
                                 >
                                     <div className={classes.content__newForm__list__item__answer}>
-                                        <span>{item.answer}</span>
+                                        <span>{item.question}</span>
                                         <span>{listTypeAnswer.map(typeItem => {
                                             if (typeItem.id === item.typeAnswer) {
                                                 return typeItem.text
@@ -228,7 +229,7 @@ const NewForm = () => {
                                         })}</span>
                                     </div>
                                     <div className={classes.content__newForm__list__item__btn}>
-                                        <i class="fa-solid fa-pen" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => {editAnswerByForm(item.id)}}></i>
+                                        <i class="fa-solid fa-pen" data-bs-toggle="modal" data-bs-target="#answerModal" onClick={() => {editAnswerByForm(item.id)}}></i>
                                         <i class="fa-solid fa-trash" onClick={() => removeAnswerByForm(item.id)}></i>
                                     </div>
                                 </div>