63 lines
2.6 KiB
JavaScript
63 lines
2.6 KiB
JavaScript
'use client'
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
export default function FAQAccordion({ faqs = [], className = '' }) {
|
|
const [activeIndex, setActiveIndex] = useState(null);
|
|
const refs = useRef([]);
|
|
|
|
useEffect(() => {
|
|
refs.current = refs.current.slice(0, faqs.length);
|
|
}, [faqs]);
|
|
|
|
if (!faqs || faqs.length === 0) return null;
|
|
|
|
return (
|
|
<section className={`faq-section ${className}`}>
|
|
<div className="sec-title">
|
|
{/* <div className="title">FAQ</div> */}
|
|
<h2>FAQs</h2>
|
|
{/* <div className="separate"></div> */}
|
|
</div>
|
|
|
|
<div className="faq-wrapper">
|
|
{faqs.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className={`faq-block ${activeIndex === i ? 'active' : ''}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="faq-question"
|
|
onClick={() => setActiveIndex(activeIndex === i ? null : i)}
|
|
aria-expanded={activeIndex === i}
|
|
aria-controls={`faq-answer-${i}`}
|
|
>
|
|
<h3>{item.q}</h3>
|
|
<span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
|
|
</button>
|
|
|
|
<div
|
|
id={`faq-answer-${i}`}
|
|
ref={(el) => (refs.current[i] = el)}
|
|
className="faq-answer"
|
|
style={{
|
|
maxHeight:
|
|
activeIndex === i
|
|
? `${refs.current[i]?.scrollHeight || 0}px`
|
|
: "0px",
|
|
overflow: "hidden",
|
|
transition: "max-height 0.4s ease",
|
|
}}
|
|
aria-hidden={activeIndex !== i}
|
|
>
|
|
<div className="faq-answer-inner">
|
|
<p dangerouslySetInnerHTML={{ __html: item.a }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|