[Task 3] Components in React

[DrSmile444]

• Main repository - https://github.com/MastersAcademy/fe-react-2024
• Design - https://www.figma.com/file/mRAOMdJiAsD8fHSVnYwUl9/React-web-page
• Branch name - task/03-components

Task Description

In this homework, you will create a dynamic Products List component that interacts with a simple About component. You will implement component toggling logic that allows users to switch between viewing an About page and a Products List via the site header.
Note: We don't need to add filters yet. Just a list of Products.

1. Create a ProductsList component:

• This component should accept an array of products as a prop and render these products using a child ProductCard component.
• Each ProductCard component should display the product's name, price, and other relevant details.

2. Hide About component:

• Just comment or remove use of About component (if any) inside App.tsx. We should see Header, ProductsList, Footer

3. Add adaptivity for ProductsList:

• It should be displayed fine for mobiles as well according to design.

Advance Task Description (1*)

1. Update the static header from the previous task to include interactivity:

• Implement toggling logic in the App.tsx using useState to switch between the About and ProductsList components based on user interaction.
• Use a state variable in App.tsx to manage which component is currently visible (About or ProductsList).
• Render components conditionally based on the current state.
• Ensure the Header and Footer remain visible regardless of which component is displayed.

2. Add logic for Cart:

• When the user clicks on Cart icon inside a ProductCard, we need to make the icon active.
• Also, we need to show counter of added items in header cart icon.

3. (Optional) Add LocalStorage

• When reload the page, state of saved cards should be persisted.

Design

For consistent styling and layout, refer to the Figma design you used in the previous task: React Web Page Design.

Acceptance Criteria for 1

• Mentor is added to pr
• AC copied to pr description
• Link to deployed version is added to pr
• The ProductsList component correctly receives product data as props.
• ProductCard component created and renders a single product.
• Header and Footer elements are present.
• ProductList displays right on mobile devices

Acceptance Criteria for 1*

• The Header component has clickable elements that toggle the display between the About and ProductsList components.
• State management is handled in App.tsx, with state determining which component to show.
• LocalStorage added to save items in card after page realod