Small Component API Design
ReactJS
Medium
6 views
Problem Description
Design a Notice component that accepts tone, title, and children content.
Output Format
Render a React component.
Constraints
Keep props clear and simple.
Official Solution
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>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!