58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { MaterialIcon } from "./MaterialIcon";
|
|
|
|
export type FAQItem = {
|
|
question: string;
|
|
answer: string;
|
|
};
|
|
|
|
type FAQAccordionProps = {
|
|
items: FAQItem[];
|
|
};
|
|
|
|
export function FAQAccordion({ items }: FAQAccordionProps) {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="rounded-2xl border border-[#6330D6]/10 bg-white overflow-hidden shadow-[0_2px_12px_rgba(22,0,29,0.04)] transition-shadow hover:shadow-[0_4px_18px_rgba(22,0,29,0.07)]"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
|
className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left"
|
|
aria-expanded={openIndex === index}
|
|
>
|
|
<span className="text-sm md:text-base font-black text-[#16001D] leading-snug">
|
|
{item.question}
|
|
</span>
|
|
<div
|
|
className={`flex-shrink-0 w-8 h-8 rounded-full bg-[#6330D6]/8 flex items-center justify-center text-[#6330D6] transition-transform duration-300 ${
|
|
openIndex === index ? "rotate-180" : ""
|
|
}`}
|
|
>
|
|
<MaterialIcon icon="expand_more" size={20} />
|
|
</div>
|
|
</button>
|
|
<div
|
|
className={`overflow-hidden transition-all duration-300 ease-in-out ${
|
|
openIndex === index
|
|
? "max-h-[500px] opacity-100"
|
|
: "max-h-0 opacity-0"
|
|
}`}
|
|
>
|
|
<p className="px-6 pb-5 text-sm md:text-base text-[#5E5866] leading-relaxed border-t border-[#6330D6]/5 pt-4">
|
|
{item.answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|