Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job splitting the application into Header, Welcome, and Article components! You've correctly separated the JSX and CSS for most of the app, which is excellent. However, this solution requires a change because the decomposition isn't fully complete. The main goal of this task is to break the UI into the smallest logical pieces, and the navigation bar inside the Header is a perfect candidate for its own component.
To complete the task, please extract the <nav> block from Header.jsx and its corresponding styles from Header.css into a new Navigation component. This will fully align your solution with the task's core requirement of modularity. You're very close!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| .navigation__link { | ||
| display: inline-block; | ||
| outline: none; | ||
| text-decoration: none; | ||
| opacity: 0.7; | ||
| padding: 0 0.5em; | ||
| color: black; | ||
| transition: opacity 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .navigation__link:hover, | ||
| .navigation__link:focus { | ||
| opacity: 1; | ||
| } |
There was a problem hiding this comment.
The task is about splitting the application into smaller components. The navigation bar is a good candidate for its own component. As suggested in the description, you could create a Navigation component and move these related styles into its own CSS file (e.g., Navigation.css).
| <nav className="navigation"> | ||
| <a className="navigation__link" href="#about"> | ||
| About | ||
| </a> | ||
| <a className="navigation__link" href="#services"> | ||
| Services | ||
| </a> | ||
| <a className="navigation__link" href="#contact"> | ||
| Contact | ||
| </a> | ||
| </nav> |
There was a problem hiding this comment.
Good work creating the Header component. To take the decomposition a step further, consider extracting this <nav> block into its own Navigation component. The task description suggests this as a possibility. This would make your Header component simpler and the Navigation component reusable elsewhere if needed.
2 participants
DEMO LINK