Official Solution
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>
);
}
No comments yet. Start the discussion!