import { useState } from "react"; import "./styles.css"; type Faq = { id: string; question: string; answer: string }; const faqs: Faq[] = [ { id: "billing", question: "Can I change plans later?", answer: "Yes. You can upgrade or downgrade from your account settings at any time.", }, { id: "trial", question: "Is there a free trial?", answer: "Every new workspace includes a 14-day trial with all features enabled.", }, { id: "cancel", question: "What happens if I cancel?", answer: "Your workspace remains available in read-only mode until you choose a new plan.", }, ]; function FaqItem({ faq, isOpen, onToggle, }: { faq: Faq; isOpen: boolean; onToggle: () => void; }) { const panelId = `${faq.id}-panel`; return (

{isOpen && (

{faq.answer}

)}

); } export default function App() { const [openId, setOpenId] = useState(faqs[0].id); const toggleFaq = (id: string) => { setOpenId((currentId) => (currentId === id ? null : id)); }; return (

Help center

Frequently asked questions

{faqs.map((faq) => ( toggleFaq(faq.id)} /> ))}

); }

{faq.question} {isOpen ? "−" : "+"}

Frequently asked questions