Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job on decomposing the application into Welcome, Header, and Article components! The project structure is clean and follows most of the requirements.
However, this requires one change to fully meet the task goals. The task description suggested that the navigation section within the Header should be extracted into its own Navigation component. This is a key part of the decomposition exercise.
To resolve this, please create a new Navigation component in its own folder, move the <nav> element and its logic from Header.jsx into it, and then import and render the <Navigation /> component inside your Header.
✨ 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
src/components/Header/Header.jsx
Outdated
| <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.
The task description suggests that the navigation section could be extracted into its own Navigation component. Creating a separate component for the navigation would be a good practice for this decomposition task.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on creating the Navigation component and integrating it into the Header! You've correctly addressed the main feedback from the previous review. However, one final change is needed to complete the task. The goal of component decomposition is to make components self-contained, which includes their styles. Your new src/components/Navigation/Navigation.css file is currently empty. Please move the CSS rules for .navigation and .navigation__link from the main stylesheet into this dedicated file. Once that's done, the solution will be perfect!
✨ 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
| @@ -0,0 +1 @@ | |||
| /* Put article styles here */ | |||
There was a problem hiding this comment.
This file should contain the CSS styles for the Navigation component. The styles for .navigation and .navigation__link need to be moved here from the main stylesheet to complete the component decomposition. Also, the placeholder comment is incorrect, as it refers to article styles.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving this submission as an educational override to help you progress. You've done an excellent job decomposing the JSX into separate components and moving the navigation styles into their own file!
The final step to fully complete this task is to make each component truly self-contained by moving its styles out of the global App.css file. The styles for Welcome, Header, and Article are still in App.css.
Please move the CSS rules for each component into their corresponding files (e.g., .welcome styles into Welcome.css). This will complete the component decomposition. You're very close to mastering this concept, great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| @@ -0,0 +1,15 @@ | |||
| /* Put article styles here */ | |||
There was a problem hiding this comment.
This comment appears to be a copy-paste error from another file. It should either refer to navigation styles or be removed to avoid confusion.
2 participants
DEMO LINK