import React, { useState } from 'react'; const steps = ['Choose topic', 'Solve', 'Review']; function Stepper({ current }) { return ( <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', gap: 12 }}> {steps.map((label, idx) => { const done = idx < current; const active = idx === current; const bg = done ? '#0b5' : active ? '#124' : '#fff'; const color = done || active ? '#fff' : '#124'; return ( <li key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <span style={{ width: 28, height: 28, borderRadius: '50%', display: 'grid', placeItems: 'center', border: '1px solid #ddd', background: bg, color }}> {done ? '✓' : idx + 1} </span> <span style={{ fontWeight: active ? 700 : 500 }}>{label}</span> </li> ); })} </ol> ); } export default function App() { const [current, setCurrent] = useState(0); return ( <div style={{ padding: 16, display: 'grid', gap: 12 }}> <strong>meetcode steps</strong> <Stepper current={current} /> <div style={{ display: 'flex', gap: 10 }}> <button type='button' onClick={() => setCurrent((c) => Math.max(0, c - 1))} style={{ padding: '8px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>Back</button> <button type='button' onClick={() => setCurrent((c) => Math.min(steps.length - 1, c + 1))} style={{ padding: '8px 12px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Next</button> </div> </div> ); }