import React from 'react'; function Notice({ tone = 'info', title, children }) { const tones = { info: { bg: '#f3f4f6', border: '#e5e7eb', text: '#111' }, success: { bg: '#eafaf1', border: '#b7f0d0', text: '#0b5' }, warning: { bg: '#fff2b2', border: '#f0d36c', text: '#6b4f00' } }; const t = tones[tone] || tones.info; return ( <section style={{ background: t.bg, border: '1px solid ' + t.border, color: t.text, borderRadius: 14, padding: 14, width: 520 }}> <strong>{title}</strong> <div style={{ marginTop: 8 }}>{children}</div> </section> ); } export default function App() { return ( <div style={{ padding: 16 }}> <Notice tone='success' title='meetcode saved'> <p style={{ margin: 0 }}>Your progress is updated.</p> </Notice> </div> ); }