finish step one

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;