30 lines
893 B
TypeScript
30 lines
893 B
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
|
||
/* FAQ accordions — port of the subscription page's faq-button toggle. */
|
||
export default function Faq({ items }: { items: { q: string; a: string }[] }) {
|
||
const [openIdx, setOpenIdx] = useState<number | null>(0)
|
||
|
||
return (
|
||
<div className="faq-list">
|
||
{items.map((item, i) => {
|
||
const open = openIdx === i
|
||
return (
|
||
<article className={`faq-item${open ? ' open' : ''}`} key={i}>
|
||
<button
|
||
className="faq-button"
|
||
type="button"
|
||
aria-expanded={open}
|
||
onClick={() => setOpenIdx(open ? null : i)}
|
||
>
|
||
<span>{item.q}</span><span aria-hidden="true">{open ? '−' : '+'}</span>
|
||
</button>
|
||
<div className="faq-answer" hidden={!open}>{item.a}</div>
|
||
</article>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
}
|