import React, { useState, useRef, useEffect } from "react"; import { BasicQuestionType } from "../types"; import { REssayForm } from "./REssayForm"; import { RCheckboxForm } from "./RCheckboxForm"; import { RRadioForm } from "./RRadioForm"; import { RDropdownForm } from "./RDropdownForm"; import { RFileForm } from "./RFileForm"; import { RRatingForm } from "./RRatingForm"; import { RDateForm } from "./RDateForm"; type AccordionProps = { question: BasicQuestionType; }; export const Accordion = ({ question }: AccordionProps) => { const [isOpened, setOpened] = useState(false); const [height, setHeight] = useState("0px"); const contentElement = useRef(null); const HandleOpening = () => { setOpened(!isOpened); setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px"); }; function getContent(question: BasicQuestionType) { switch (question.type) { case "essay": return ; case "radio": return ; case "checkbox": return ; case "dropdown": return ; case "file": return ; case "rating": return ; case "date": return ; default: return <>; } } console.log(question); return (

{question.title}

{isOpened ? "△" : "▽"}
{question.answers && getContent(question)}
); }; export default Accordion;