import React, { useState } from 'react'; const items = [ { id: 'what', title: 'What is meetcode?', body: 'A small practice site with quick questions.' }, { id: 'how', title: 'How to use it?', body: 'Pick a topic, solve, then read the explanation.' }, { id: 'why', title: 'Why daily?', body: 'Small steps create strong fundamentals.' } ]; function Panel({ open, title, body, onToggle }) { return ( <section style={{ border: '1px solid #eee', borderRadius: 14, padding: 12 }}> <button type='button' onClick={onToggle} style={{ width: '100%', textAlign: 'left', border: 0, background: 'transparent', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <strong>{title}</strong> <span aria-hidden='true'>{open ? '−' : '+'}</span> </button> {open ? <div style={{ marginTop: 10, color: '#555' }}>{body}</div> : null} </section> ); } export default function App() { const [openIds, setOpenIds] = useState(() => new Set(['what'])); function toggle(id) { setOpenIds((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); } return ( <div style={{ padding: 16, width: 560, display: 'grid', gap: 10 }}> <h2 style={{ margin: 0 }}>meetcode accordion</h2> {items.map((x) => ( <Panel key={x.id} open={openIds.has(x.id)} title={x.title} body={x.body} onToggle={() => toggle(x.id)} /> ))} </div> ); }