Simple Header Component
ReactJS
Easy
6 views
Problem Description
Build a header for meetcode with a brand on the left and links on the right.
Output Format
Render a React component.
Constraints
Use function components. No external libraries.
Official Solution
import React from 'react';
export function Header({ brand, links }) {
return (
<header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 12, borderBottom: '1px solid #eee' }}>
<strong>{brand}</strong>
<nav style={{ display: 'flex', gap: 12 }}>
{links.map((label) => (
<a key={label} href='#' style={{ color: '#124', textDecoration: 'none' }}>
{label}
</a>
))}
</nav>
</header>
);
}
export default function App() {
return <Header brand='meetcode' links={['Topics', 'Practice', 'Login']} />;
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!