add task solution#4442
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
The implementation is missing the Navigation component extraction, which is a critical requirement. Multiple reviewers explicitly point out that the <nav className="navigation"> element (lines 8-14 in Header.jsx) and its associated .navigation__link CSS styles (lines 25-42 in Header.css) should be moved to a separate src/components/Navigation/ folder with Navigation.jsx and Navigation.css files. The task requires decomposing App.js based on CSS blocks, and since there's a distinct .navigation__link BEM block in the CSS, it qualifies as a separate component. Please create src/components/Navigation/Navigation.jsx containing the nav element and src/components/Navigation/Navigation.css with the navigation styles, then update Header.jsx to import and render the Navigation component.
✨ 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
| font-size: 10pt; | ||
| line-height: 1.4; | ||
| font-weight: 400; | ||
| font-family: "Source Sans Pro", "Open Sans", Roboto, Arial, sans-serif; | ||
| line-height: 1.4; | ||
| } | ||
|
|
There was a problem hiding this comment.
The <nav className="navigation"> block with navigation links should be extracted into a separate Navigation component in src/components/Navigation/Navigation.jsx, and Header.jsx should render this component instead.
| pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam lorem, | ||
| vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce | ||
| efficitur, orci non vestibulum consequat, lectus turpis bibendum odio, in | ||
| efficitur leo felis sed justo. Fusce commodo iaculis orci, quis imperdiet | ||
| urna. Sed mollis facilisis lacus non condimentum. Nunc efficitur massa non | ||
| neque elementum semper. Vestibulum lorem arcu, tincidunt in quam et, | ||
| feugiat venenatis augue. Donec sed tincidunt tellus, a facilisis magna. |
There was a problem hiding this comment.
The Navigation component is not extracted into its own folder. The task description allows creating a Navigation folder, but the <nav className="navigation"> element (lines 8-14) remains inside Header.jsx. Move this to src/components/Navigation/Navigation.jsx and update Header.jsx to import and use it.
| display: block; | ||
|
|
||
| margin: 0; | ||
| padding-top: calc(50vh - 20pt); | ||
|
|
||
| font-size: 400%; | ||
| font-weight: 700; | ||
| line-height: 1; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
The <nav className="navigation"> element (lines 7-16) should be moved to src/components/Navigation/Navigation.jsx and imported into Header.jsx, rather than being inline in the Header component.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
All components have been properly decomposed from App.js based on CSS BEM blocks: Welcome, Header, Navigation, and Article. Each component is in its own folder with a corresponding CSS file, and all components use export default as required by tests. The Navigation component is correctly extracted with its <nav className="navigation"> element in Navigation.jsx and .navigation__link styles in Navigation.css. The Header.jsx properly imports and renders the Navigation component. The project structure follows all checklist requirements and the implementation is complete.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| .article { | ||
| max-width: 800px; | ||
| margin: 5em auto 0; | ||
| padding: 1em; | ||
|
|
||
| font-size: 140%; |
There was a problem hiding this comment.
Missing src/components/Header/Header.jsx file. The Header component should import and render the Navigation component.
2 participants
https://oksanasht.github.io/react_decompose/