add task solution by katrysyar · Pull Request #4328 · mate-academy/react_decompose

katrysyar · 2026-03-24T15:12:58Z

mateacademy-ai-mentor

Review Summary

Great job on decomposing the application into smaller components! The overall structure is well-organized. However, a couple of adjustments are needed to fully meet the task requirements.

Here are the main points to address:

Create a Navigation Component: The navigation section is still part of the Header component. As mentioned in the task, please create a separate Navigation component in its own folder. Move the <nav> block from Header.jsx and its related styles from Header.css into the new component's files. Then, render the new <Navigation /> component inside the Header.
Correct Component Exports and Imports: Your components currently have both named and default exports (e.g., export function Welcome(...) and export default Welcome). The task requires using only export default. Please remove the export keyword from your function declarations and rely solely on the default export at the end of the file. This will also require you to change the imports in App.jsx from named imports like { Welcome } to default imports like import Welcome from './components/Welcome/Welcome';.

Once these changes are made, your solution will be perfect. Keep up the great work!

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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.

mateacademy-ai-mentor · 2026-03-24T15:14:38Z

src/components/Header/Header.css

+.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;
+}


According to the task description, you should create a separate Navigation component. These navigation-related styles should be moved to a corresponding Navigation.css file inside the Navigation component's folder.

mateacademy-ai-mentor · 2026-03-24T15:14:38Z

src/App.jsx

+import { Welcome } from './components/Welcome/Welcome';
+import { Header } from './components/Header/Header';
+import { Article } from './components/Article/Article';


The task requires using export default for all components. While your component files do have default exports, you are using named imports here ({ Welcome }). It's conventional to use default imports when a module provides a default export. Please change this to a default import: import Welcome from './components/Welcome/Welcome';. The same applies to the Header and Article imports.

mateacademy-ai-mentor · 2026-03-24T15:14:38Z

src/components/Article/Article.jsx

+import './Article.css';

-// Create an Article function returning the HTML of article block
+export function Article() {


The task requires using export default for all components. By adding the export keyword here, you are creating a named export in addition to the default export at the end of the file. This is redundant. Please remove the export keyword from this function declaration to ensure there is only one default export.

mateacademy-ai-mentor · 2026-03-24T15:14:38Z

src/components/Header/Header.jsx

+import './Header.css';

-// Create a Header function returning the HTML of header block
+export function Header() {


The task requires using export default for all components. By adding the export keyword here, you are creating a named export in addition to the default export at the end of the file. This is redundant. Please remove the export keyword from this function declaration to ensure there is only one default export.

mateacademy-ai-mentor · 2026-03-24T15:14:38Z

src/components/Header/Header.jsx

+      <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>


The task description suggests creating a separate Navigation component for this block of code. You should create a Navigation component in its own folder, move this <nav> element and its contents there, and then import and render the Navigation component here.

mateacademy-ai-mentor · 2026-03-24T15:14:38Z

src/components/Welcome/Welcome.jsx

+import './Welcome.css';

-// Create a Welcome function returning the HTML of welcome block
+export function Welcome() {


The task requires using export default for all components. By adding the export keyword here, you are creating a named export in addition to the default export at the end of the file. This is redundant. Please remove the export keyword from this function declaration to ensure there is only one default export.

mateacademy-ai-mentor

Review Summary

Great job on creating the Navigation component and splitting the CSS files! The project structure is much cleaner now.

However, there's one critical requirement from the task that needs to be addressed before this can be approved. The task requires using only export default for all components. The Navigation component is still using a named export.

To fix this, please make the following changes:

In src/components/Navigation/Navigation.jsx, remove the export keyword from the function declaration. It should be function Navigation() { ... }, not export function Navigation() { ... }.
In src/components/Header/Header.jsx, update the import statement to use a default import: change import { Navigation } from '../Navigation/Navigation'; to import Navigation from '../Navigation/Navigation';.

You're very close to finishing! Just this one change is needed to meet all the requirements.

✨ Please rate this review in the Platform's notification center¹. 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 button² 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 tag³.
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.

mateacademy-ai-mentor · 2026-03-24T16:06:18Z

src/components/Header/Header.jsx

+import './Header.css';

-// Create a Header function returning the HTML of header block
+import { Navigation } from '../Navigation/Navigation';


The task requires using default imports for all components. This should be import Navigation from '../Navigation/Navigation';.

You'll also need to ensure that the Navigation.jsx file is correctly set up with only a default export, as mentioned in the previous review.

mateacademy-ai-mentor · 2026-03-24T16:06:18Z

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+export function Navigation() {


This named export should be removed. The task requires using only export default. Please remove the export keyword from the function declaration and rely on the export default Navigation; at the end of the file.

mateacademy-ai-mentor

Review Summary

Excellent work on this submission! You've successfully addressed all the feedback from the previous review. The project now correctly uses export default for all components, and the component decomposition into separate folders with their own CSS is done perfectly. The project structure is clean and well-organized. Your solution is approved, great job!

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

add task solution

107e984

mateacademy-ai-mentor suggested changes Mar 24, 2026

View reviewed changes

katrysyar requested a review from mateacademy-ai-mentor March 24, 2026 16:04

add task solution

b1075b9

mateacademy-ai-mentor suggested changes Mar 24, 2026

View reviewed changes

katrysyar requested a review from mateacademy-ai-mentor March 24, 2026 16:08

add task solution

ad00b07

mateacademy-ai-mentor approved these changes Mar 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution#4328

add task solution#4328
katrysyar wants to merge 3 commits intomate-academy:masterfrom
katrysyar:develop

katrysyar commented Mar 24, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor Mar 24, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,19 @@
		import './Navigation.css';

		export function Navigation() {

Conversation

katrysyar commented Mar 24, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants