66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { MaterialIcon } from "./MaterialIcon";
|
|
|
|
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
|
|
|
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>
|
|
<motion.div
|
|
className="flex-shrink-0 w-8 h-8 rounded-full bg-[#6330D6]/8 flex items-center justify-center text-[#6330D6]"
|
|
animate={{ rotate: openIndex === index ? 180 : 0 }}
|
|
transition={{ duration: 0.3, ease: EASE }}
|
|
>
|
|
<MaterialIcon icon="expand_more" size={20} />
|
|
</motion.div>
|
|
</button>
|
|
<AnimatePresence initial={false}>
|
|
{openIndex === index && (
|
|
<motion.div
|
|
key="content"
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: EASE }}
|
|
style={{ overflow: "hidden" }}
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|