84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import { Plus, Minus } from 'lucide-react'
|
|
import { AnimateIn } from '@/components/AnimateIn'
|
|
|
|
interface FaqItem {
|
|
question: string
|
|
answer: string
|
|
}
|
|
|
|
interface FaqAccordionBlockProps {
|
|
badge?: string
|
|
heading: string
|
|
subheading?: string
|
|
items?: FaqItem[]
|
|
}
|
|
|
|
export function FaqAccordionBlockComponent(props: FaqAccordionBlockProps) {
|
|
const { badge, heading, subheading, items } = props
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0)
|
|
|
|
const toggle = (idx: number) => {
|
|
setOpenIndex(openIndex === idx ? null : idx)
|
|
}
|
|
|
|
return (
|
|
<section className="py-24 bg-surface-gray border-b-2 border-dark">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-4xl">
|
|
<AnimateIn direction="up">
|
|
<div className="max-w-3xl mb-14 text-center mx-auto">
|
|
{badge && (
|
|
<div className="inline-block bg-dark text-primary text-xs font-black uppercase tracking-widest px-3 py-1 mb-4">
|
|
{badge}
|
|
</div>
|
|
)}
|
|
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-dark">
|
|
{heading}
|
|
</h2>
|
|
{subheading && (
|
|
<p className="mt-4 text-base text-muted-text leading-relaxed font-medium">
|
|
{subheading}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
{items && items.length > 0 && (
|
|
<div className="space-y-3">
|
|
{items.map((item, idx) => {
|
|
const isOpen = openIndex === idx
|
|
return (
|
|
<AnimateIn key={idx} delay={idx * 100} direction="up">
|
|
<div
|
|
className="border-2 border-dark bg-white transition-all hover-lift"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggle(idx)}
|
|
className="w-full flex items-center justify-between p-6 text-left hover:bg-[#f8f8f8] transition-colors"
|
|
>
|
|
<span className="text-sm sm:text-base font-black uppercase text-dark pr-4">
|
|
{item.question}
|
|
</span>
|
|
<div className="h-7 w-7 flex items-center justify-center bg-primary text-dark border border-dark shrink-0 font-bold">
|
|
{isOpen ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
|
|
</div>
|
|
</button>
|
|
{isOpen && (
|
|
<div className="px-6 pb-6 pt-2 text-sm text-[#444444] leading-relaxed border-t-2 border-[#f0f0f0]">
|
|
{item.answer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AnimateIn>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|