56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import styles from './FAQ.module.css';
|
||
|
||
interface FAQItem {
|
||
q: string;
|
||
a: string;
|
||
}
|
||
|
||
interface FAQProps {
|
||
faqs: FAQItem[];
|
||
}
|
||
|
||
export default function FAQ({ faqs }: FAQProps) {
|
||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||
|
||
useEffect(() => {
|
||
if (faqs.length > 0) {
|
||
const timer = setTimeout(() => {
|
||
setOpenIndex(0);
|
||
}, 100);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [faqs.length]);
|
||
|
||
const toggleFAQ = (index: number) => {
|
||
setOpenIndex(openIndex === index ? null : index);
|
||
};
|
||
|
||
return (
|
||
<div className={styles.faqSection}>
|
||
<h3 className={styles.faqTitle}>FAQs</h3>
|
||
<div className={styles.faqContainer}>
|
||
{faqs.map((faq, index) => (
|
||
<div key={index} className={styles.faqItem}>
|
||
<button
|
||
className={`${styles.faqQuestion} ${openIndex === index ? styles.active : ''}`}
|
||
onClick={() => toggleFAQ(index)}
|
||
>
|
||
<span>{faq.q}</span>
|
||
<span className={styles.icon}>{openIndex === index ? '−' : '+'}</span>
|
||
</button>
|
||
<div className={`${styles.faqAnswer} ${openIndex === index ? styles.open : ''}`}>
|
||
<div
|
||
className={styles.faqContent}
|
||
dangerouslySetInnerHTML={{ __html: faq.a }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|