finish step one

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

@@ -0,0 +1,12 @@
+.main {
+    select {
+        font-size: 15px;
+        font-family: "Montserrat", sans-serif;
+        border: 1px solid rgb(200, 200, 200);
+        padding: 5px;
+        cursor: pointer;
+        option {
+            
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+.main {
+    input {
+        display: block;
+        font-size: 15px;
+        font-family: "Montserrat", sans-serif;
+        border: 1px solid rgb(200, 200, 200);
+        padding: 1%;
+    }
+}

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

@@ -0,0 +1,3 @@
+.main {
+    input {}
+}

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

@@ -0,0 +1,3 @@
+.main {
+    
+}

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

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

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

@@ -0,0 +1,3 @@
+.main {
+       
+}

src/components/PreviewModal.jsx

@@ -2,6 +2,9 @@ import React from "react";
 import classes from "../assets/styles/components/previewModal.module.scss";
 
 const PreviewModal = ({newForm, listTypeAnswer}) => {
+    // const [file, setFile] = useState('');
+    // const [value, setValue] = useState('');
+
     return (
         <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}>
@@ -19,7 +22,7 @@ const PreviewModal = ({newForm, listTypeAnswer}) => {
                                 </div>
                                 <div className={classes.myModal__dialog__content__body__item__answer}>
                                     {
-                                        listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({text: '55555'})
+                                        listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({postfix: i, answers: item.optionAnswer})
                                     }
                                 </div>
                             </div>

src/components/typeAnswer/DropDownList.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import classes from "../../assets/styles/components/typeAnswer/dropDownList.module.scss"
+
+const DropDownList = (props) => {
+    return (
+        <div className={classes.main}>
+            {/* <select value={value} onChange={e => setValue(e.target.value)}>
+                {props.answers.map((item, i) => 
+                    <option value={item.id} key={i}>{item.text}</option>
+                )}
+            </select> */}
+            <select>
+                {props.answers.map((item, i) => 
+                    <option value={item.id} key={i}>{item.text}</option>
+                )}
+            </select>
+        </div>
+    )
+}
+
+export default DropDownList;

src/components/typeAnswer/InputDate.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import classes from "../../assets/styles/components/typeAnswer/inputDate.module.scss"
+
+const InputDate = (props) => {
+    return (
+        <div className={classes.main}>
+            <input type="datetime-local" />
+        </div>
+    )
+}
+
+export default InputDate;

src/components/typeAnswer/InputFile.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import classes from "../../assets/styles/components/typeAnswer/inputFile.module.scss"
+
+const InputFile = (props) => {
+    return (
+        <div className={classes.main}>
+            <input 
+                // id={`file_${props.postfix}`}
+                type="file" 
+                multiple
+                accept="image/*,image/jpeg,video/mp4,video/x-m4v,video/*" 
+                className={classes.myModal__dialog__content__body__answer__file}
+                // value={file}
+                // onChange={event => setFile(event.target.value)}
+            ></input> 
+        </div>
+    )
+}
+
+export default InputFile;

src/components/typeAnswer/InputMultipleRadio.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss"
+
+const InputMultipleRadio = (props) => {
+    return (
+        <div className={classes.main}>
+            {props.answers.map((item, i) => 
+                <div class="form-check" key={i}>
+                    <input class="form-check-input" type="checkbox" name={`inputMultiple_${props.postfix}`} id={`inputMultiple_${props.postfix}`}/>
+                    <label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default InputMultipleRadio;

src/components/typeAnswer/InputRadio.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import classes from "../../assets/styles/components/typeAnswer/inputRadio.module.scss"
+
+const InputRadio = (props) => {
+    return (
+        <div className={classes.main}>
+            {props.answers.map((item, i) => 
+                <div class="form-check" key={i}>
+                    <input class="form-check-input" type="radio" name={`inputRadio_${props.postfix}`} id={`choice_${item.id}`}/>
+                    <label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
+                </div>
+            )}
+            
+        </div>
+    )
+}
+
+export default InputRadio;

src/components/typeAnswer/InputText.jsx

@@ -4,7 +4,7 @@ import classes from "../../assets/styles/components/typeAnswer/inputText.module.
 const InputText = (props) => {
     return (
         <div className={classes.main}>
-            <input type="text" placeholder={"Ответ"}/>
+            <input type="text" placeholder={"Ответ..."}/>
         </div>
     )
 }

src/components/typeAnswer/TextArea.jsx

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

src/components/typeAnswer/YesNo.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import classes from "../../assets/styles/components/typeAnswer/yesNo.module.scss"
+
+const YesNo = (props) => {
+    return (
+        <div className={classes.main}>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceYes"/>
+                <label class="form-check-label" for="choiceYes">Да</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceNo"/>
+                <label class="form-check-label" for="choiceNo">Нет</label>
+            </div>
+        </div>
+    )
+}
+
+export default YesNo;

src/pages/NewForm.jsx

@@ -6,6 +6,13 @@ import AnswerModal from "../components/AnswerModal.jsx";
 import PreviewModal from "../components/PreviewModal.jsx"
 import { FormsData } from "../context";
 import InputText from "../components/typeAnswer/InputText.jsx"
+import TextArea from "../components/typeAnswer/TextArea.jsx";
+import YesNo from "../components/typeAnswer/YesNo.jsx"
+import InputDate from "../components/typeAnswer/InputDate.jsx";
+import InputMultipleRadio from "../components/typeAnswer/InputMultipleRadio.jsx";
+import InputRadio from "../components/typeAnswer/InputRadio.jsx";
+import DropDownList from "../components/typeAnswer/DropDownList.jsx";
+import InputFile from "../components/typeAnswer/InputFile.jsx";
 
 const NewForm = () => {
     const navigate = useNavigate();
@@ -33,13 +40,13 @@ const NewForm = () => {
 
     const [listTypeAnswer, setListTypeAnswer] = useState([
         {id: 1, text: 'Краткий ответ', typeTag: InputText},
-        {id: 2, text: 'Расширенный ответ', typeTag: InputText},
+        {id: 2, text: 'Расширенный ответ', typeTag: TextArea},
-        {id: 3, text: 'Выбор из вариантов', typeTag: InputText},
+        {id: 3, text: 'Выбор из вариантов', typeTag: InputRadio},
-        {id: 4, text: 'Множественный выбор', typeTag: InputText},
+        {id: 4, text: 'Множественный выбор', typeTag: InputMultipleRadio},
-        {id: 5, text: 'Выпадающий список', typeTag: InputText},
+        {id: 5, text: 'Выпадающий список', typeTag: DropDownList},
-        {id: 6, text: 'Да/Нет', typeTag: InputText},
+        {id: 6, text: 'Да/Нет', typeTag: YesNo},
-        {id: 7, text: 'Файл', typeTag: InputText},
+        {id: 7, text: 'Файл', typeTag: InputFile},
-        {id: 8, text: 'Дата', typeTag: InputText}
+        {id: 8, text: 'Дата', typeTag: InputDate}
     ]);
 
     function removeAnswerByForm(id) {