85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { ChevronDown } from 'lucide-react'
|
|
|
|
interface FAQItem {
|
|
q: string
|
|
a: stringß
|
|
}
|
|
|
|
export function AnimatedFAQ({ faqs }: { faqs: FAQItem[] }) {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
|
|
|
const toggleFAQ = (index: number) => {
|
|
setOpenIndex(openIndex === index ? null : index)
|
|
}
|
|
|
|
return (
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
|
{faqs.map((faq, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="onepage-faq-item"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.1, duration: 0.5 }}
|
|
whileHover={{
|
|
scale: 1.02,
|
|
transition: { duration: 0.2 }
|
|
}}
|
|
>
|
|
<motion.button
|
|
className="onepage-faq-question"
|
|
onClick={() => toggleFAQ(index)}
|
|
style={{
|
|
width: '100%',
|
|
textAlign: 'left',
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
padding: 0
|
|
}}
|
|
whileHover={{ color: 'var(--primary-400)' }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{faq.q}
|
|
<motion.div
|
|
animate={{ rotate: openIndex === index ? 180 : 0 }}
|
|
transition={{ duration: 0.3, ease: "easeInOut" }}
|
|
>
|
|
<ChevronDown className="w-5 h-5" />
|
|
</motion.div>
|
|
</motion.button>
|
|
|
|
<AnimatePresence>
|
|
{openIndex === index && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{
|
|
duration: 0.4,
|
|
ease: "easeInOut",
|
|
opacity: { duration: 0.2 }
|
|
}}
|
|
style={{ overflow: 'hidden' }}
|
|
>
|
|
<motion.div
|
|
initial={{ y: -10 }}
|
|
animate={{ y: 0 }}
|
|
exit={{ y: -10 }}
|
|
transition={{ duration: 0.3, delay: 0.1 }}
|
|
className="onepage-faq-answer"
|
|
style={{ marginTop: '12px', paddingTop: '12px', borderTop: '1px solid rgba(255,255,255,0.1)' }}
|
|
>
|
|
{faq.a}
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
)
|
|
} |