55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
|
// @ts-nocheck
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import { faqDataMain } from "@/data/faqs";
|
||
|
|
import React, { useEffect, useRef, useState } from "react";
|
||
|
|
|
||
|
|
export default function Faq({ faqData = faqDataMain }) {
|
||
|
|
const questionRefs = useRef([]);
|
||
|
|
const answerRefs = useRef([]);
|
||
|
|
const [currentIndex, setCurrentIndex] = useState(-1);
|
||
|
|
useEffect(() => {
|
||
|
|
questionRefs.current.forEach((el) => {
|
||
|
|
el.classList.remove("active");
|
||
|
|
});
|
||
|
|
answerRefs.current.forEach((el) => {
|
||
|
|
el.style.height = "0px";
|
||
|
|
el.style.overflow = "hidden";
|
||
|
|
el.style.transition = "all 0.5s ease-in-out";
|
||
|
|
el.style.marginBottom = "0px";
|
||
|
|
});
|
||
|
|
if (currentIndex !== -1) {
|
||
|
|
questionRefs.current[currentIndex].classList.add("active");
|
||
|
|
const element = answerRefs.current[currentIndex];
|
||
|
|
element.style.height = element.scrollHeight + "px";
|
||
|
|
element.style.overflow = "hidden";
|
||
|
|
element.style.transition = "all 0.5s ease-in-out";
|
||
|
|
element.style.marginBottom = "1.55em";
|
||
|
|
}
|
||
|
|
}, [currentIndex]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<dl className="toggle">
|
||
|
|
{faqData.map((item, index) => (
|
||
|
|
<React.Fragment key={index}>
|
||
|
|
<dt
|
||
|
|
onClick={() => {
|
||
|
|
setCurrentIndex((pre) => (pre == index ? -1 : index));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<a ref={(el) => (questionRefs.current[index] = el)}>
|
||
|
|
{item.question}
|
||
|
|
</a>
|
||
|
|
</dt>
|
||
|
|
<dd
|
||
|
|
ref={(el) => (answerRefs.current[index] = el)}
|
||
|
|
className="black faqAnswer"
|
||
|
|
>
|
||
|
|
{item.answer}
|
||
|
|
</dd>
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
</dl>
|
||
|
|
);
|
||
|
|
}
|