41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
'use client';
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function FaqSection({ faqData }) {
|
|
const [isActive, setIsActive] = useState(null);
|
|
|
|
const handleToggle = (index) => setIsActive(isActive === index ? null : index);
|
|
|
|
if (!faqData || faqData.length === 0) return null;
|
|
|
|
return (
|
|
<section className="faq-section pt-5">
|
|
<div className="auto-container">
|
|
<div className="sec-title centred mb_40">
|
|
<h2>Frequently Asked Questions</h2>
|
|
</div>
|
|
<div className="content-box">
|
|
<ul className="accordion-box">
|
|
{faqData.map((item, index) => (
|
|
<li key={index} className="accordion block">
|
|
<div
|
|
className={isActive === index ? "acc-btn active" : "acc-btn"}
|
|
onClick={() => handleToggle(index)}
|
|
>
|
|
<div className="icon-box"><i className="icon-34"></i></div>
|
|
<h5>{item.question}</h5>
|
|
</div>
|
|
<div className={isActive === index ? "acc-content current" : "acc-content"}>
|
|
<div className="content">
|
|
<div className="text"><p>{item.answer}</p></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |