55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { faq } from "@/content/ebook";
|
|
|
|
export function FaqAccordion() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{faq.map((item, index) => {
|
|
const isOpen = openIndex === index;
|
|
return (
|
|
<div key={item.question} className="glass-card overflow-hidden rounded-2xl">
|
|
<button
|
|
type="button"
|
|
id={`faq-btn-${index}`}
|
|
aria-expanded={isOpen}
|
|
aria-controls={`faq-panel-${index}`}
|
|
onClick={() => setOpenIndex(isOpen ? null : index)}
|
|
className="flex w-full items-start justify-between gap-4 px-5 py-4 text-left sm:px-6 sm:py-5"
|
|
>
|
|
<span className="font-display text-base font-semibold leading-snug sm:text-lg">
|
|
{item.question}
|
|
</span>
|
|
<span
|
|
className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--gradient-1)]/10 text-[var(--accent)] transition-transform duration-200 ${
|
|
isOpen ? "rotate-45" : ""
|
|
}`}
|
|
aria-hidden
|
|
>
|
|
+
|
|
</span>
|
|
</button>
|
|
<div
|
|
id={`faq-panel-${index}`}
|
|
role="region"
|
|
aria-labelledby={`faq-btn-${index}`}
|
|
className={`grid transition-[grid-template-rows] duration-200 ${
|
|
isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
|
|
}`}
|
|
>
|
|
<div className="overflow-hidden">
|
|
<p className="border-t border-[var(--border)] px-5 pb-5 pt-0 text-[var(--muted)] leading-relaxed sm:px-6 sm:pb-6">
|
|
{item.answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|