index.tsx•2.21 kB
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { Section } from "@/types/landing";
import { useState } from "react";
export default function ({ section }: { section: Section }) {
const [activeIndex, setActiveIndex] = useState<number | null>(null);
const toggleFAQ = (index: number) => {
setActiveIndex(activeIndex === index ? null : index);
};
return (
<div className="w-full max-w-4xl mx-auto px-4 py-8">
<h2 className="text-5xl font-bold text-center mb-8">{section.title}</h2>
<p className="text-center text-2xl mb-8">{section.description}</p>
<div className="space-y-4">
{section?.items?.map((faq, index) => (
<div
key={index}
className="border border-[#7e7e7e] rounded-lg overflow-hidden"
>
<button
className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50"
onClick={() => toggleFAQ(index)}
>
<span className="font-medium text-gray-900">{faq.title}</span>
<svg
className={`w-5 h-5 transform transition-transform duration-200 ${
activeIndex === index ? "rotate-180" : ""
}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<AnimatePresence>
{activeIndex === index && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="px-6 py-4 bg-gray-50"
>
<p className="text-gray-600">{faq.description}</p>
</motion.div>
)}
</AnimatePresence>
</div>
))}
</div>
</div>
);
}