74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
'use client'
|
|
import React, { useState } from 'react'
|
|
import type { FDFaqBlock as FDFaqBlockProps } from '@/payload-types'
|
|
import RichText from '@/components/RichText'
|
|
|
|
export const FDFaqBlockComponent: React.FC<FDFaqBlockProps> = ({
|
|
heading,
|
|
items,
|
|
theme = 'gray',
|
|
}) => {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
|
|
|
const bgClass =
|
|
theme === 'dark'
|
|
? 'bg-fd-navy'
|
|
: theme === 'gray'
|
|
? 'bg-fd-gray-light'
|
|
: 'bg-white'
|
|
const headingColor = theme === 'dark' ? 'text-fd-yellow' : 'text-fd-navy'
|
|
const textColor = theme === 'dark' ? 'text-white' : 'text-fd-navy'
|
|
const borderColor = theme === 'dark' ? 'border-white/20' : 'border-fd-navy/10'
|
|
const proseColor = theme === 'dark' ? 'text-white/80' : 'text-fd-navy/80'
|
|
|
|
return (
|
|
<section className={`w-full py-16 md:py-20 lg:py-[130px] ${bgClass}`}>
|
|
<div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-start gap-6">
|
|
<h2 className={`w-full max-w-[550px] font-joey-heavy text-fd-h1 ${headingColor}`}>
|
|
{heading}
|
|
</h2>
|
|
<div className="w-full max-w-[1162px]">
|
|
{items?.map((item, index) => (
|
|
<div key={index} className={`border-b ${borderColor}`}>
|
|
<button
|
|
className={`flex w-full items-center gap-3 md:gap-4 py-4 md:py-5 text-left transition-colors ${textColor}`}
|
|
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
|
aria-expanded={openIndex === index}
|
|
>
|
|
<svg
|
|
className={`w-4 h-4 md:w-5 md:h-5 flex-shrink-0 transition-transform duration-200 ${
|
|
openIndex === index ? 'rotate-45' : ''
|
|
}`}
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<line x1="10" y1="2" x2="10" y2="18" />
|
|
<line x1="2" y1="10" x2="18" y2="10" />
|
|
</svg>
|
|
<span className="font-joey text-fd-h3">
|
|
{item.question}
|
|
</span>
|
|
</button>
|
|
<div
|
|
className={`grid transition-all duration-200 ease-out ${
|
|
openIndex === index
|
|
? 'grid-rows-[1fr] opacity-100 pb-5'
|
|
: 'grid-rows-[0fr] opacity-0'
|
|
}`}
|
|
>
|
|
<div className="overflow-hidden">
|
|
<div className={`font-joey text-fd-body pl-7 md:pl-9 fd-prose ${proseColor}`}>
|
|
<RichText data={item.answer} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|