components

SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx

@@ -0,0 +1,66 @@
+import React, {useState} from "react";
+import AnswerOption from '../AnswerOption/AnswerOption';
+import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
+import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
+import styles from './QuestionItem.module.css'
+
+import singleChoiceIcon from '../../../public/radio_button_checked.svg'
+import multiplyChoiceIcon from '../../../public/check_box.svg'
+
+interface QuestionItemProps {
+    indexQuestion: number;
+    initialTextQuestion?: string;
+}
+
+const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`}) => {
+    const [answerOption, setAnswerOption] = useState(['']);
+    const [questionType] = useState('single');
+    const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
+
+    const handleAddAnswer = () => {
+        setAnswerOption([...answerOption, '']);
+    };
+
+    // const handleTypeChange = (type: string) => {
+    //     setQuestionType(type);
+    // }
+
+    const handleAnswerChange = (index: number, value: string) => {
+        const newAnswerOption = [...answerOption];
+        newAnswerOption[index] = value;
+        setAnswerOption(newAnswerOption);
+    }
+
+    const handleQuestionChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setTextQuestion(event.target.value);
+    };
+
+    return (
+        <div className={styles.questionCard}>
+            <div className={styles.questionContainer}>
+                <h2>
+                <textarea
+                    value={textQuestion}
+                    onChange={handleQuestionChange}
+                />
+                </h2>
+                {answerOption.map((answerText, index) => (
+                    <AnswerOption
+                        key={index}
+                        index={index + 1} // Индекс ответа
+                        value={answerText}
+                        src={questionType === "single" ? singleChoiceIcon : multiplyChoiceIcon}
+                        onChange={(value) => handleAnswerChange(index, value)}
+                    />
+                ))}
+
+                <AddAnswerButton
+                    onClick={handleAddAnswer}
+                />
+            </div>
+            <TypeDropdown/>
+        </div>
+    );
+}
+
+export default QuestionItem;