import React, { useState } from 'react'; const steps = [ { title: 'Pick topic', body: 'Choose React on meetcode.' }, { title: 'Solve', body: 'Write code and run it.' }, { title: 'Review', body: 'Read explanation and fix mistakes.' } ]; export default function App() { const [step, setStep] = useState(0); const current = steps[step]; return ( <div style={{ padding: 16, width: 520 }}> <h2 style={{ marginTop: 0 }}>meetcode wizard</h2> <div style={{ border: '1px solid #eee', borderRadius: 16, padding: 14 }}> <strong>{current.title}</strong> <p style={{ margin: '10px 0 0 0', color: '#555' }}>{current.body}</p> </div> <div style={{ display: 'flex', gap: 10, marginTop: 12 }}> <button type='button' onClick={() => setStep((s) => Math.max(0, s - 1))} disabled={step === 0} style={{ padding: '8px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>Back</button> <button type='button' onClick={() => setStep((s) => Math.min(steps.length - 1, s + 1))} disabled={step === steps.length - 1} style={{ padding: '8px 12px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Next</button> </div> <div style={{ marginTop: 10, color: '#555' }}>Step {step + 1} of {steps.length}</div> </div> ); }