File size: 1,359 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | export function FAQBlock({
faqs,
}: {
faqs: { question: string; answer: string }[];
}) {
if (faqs.length === 0) return null;
return (
<section className="mt-12">
<h2 className="text-xl font-bold text-[var(--text-primary)] mb-6">
Frequently Asked Questions
</h2>
<div className="space-y-4">
{faqs.map((faq) => (
<details
key={faq.question}
className="group rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)]"
>
<summary className="cursor-pointer px-5 py-4 text-[15px] font-semibold text-[var(--text-primary)] select-none list-none flex items-center justify-between gap-3">
<span>{faq.question}</span>
<svg
className="w-4 h-4 shrink-0 text-[var(--text-muted)] transition-transform group-open:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</summary>
<div className="px-5 pb-4 text-sm leading-relaxed text-[var(--text-secondary)]">
{faq.answer}
</div>
</details>
))}
</div>
</section>
);
}
|