Products Component

Overview

The Products component is designed to display a list of products filtered by the selected category. It dynamically renders different sub-components based on the selectedProduct prop.

Implementation Details

• Props:

  • selectedProduct: A string that indicates the currently selected product category.
  • products: An array of Product objects that represents the available products.

• Sub-components:

  • AutoProducts: Displays products in the “Autos & Vehicles” category.
  • BabyProducts: Displays products in the “Baby & Children’s Products” category.
  • AllProducts: Displays all products when “All Products” is selected.

• Conditional Rendering:

  • The component checks the value of selectedProduct and renders the corresponding sub-component.
  • If a category has no associated sub-component (like “Beauty Products & Services”), a message is displayed indicating that there are no products available in that category.

Code Block

import { Product } from "@/types/global";
import AllProducts from "./FilteredProducts/AllProducts";
import AutoProducts from "./FilteredProducts/AutoProducts";
import BabyProducts from "./FilteredProducts/BabyProducts";

export default function Products({ selectedProduct, products }: { selectedProduct: string, products: Product[] }) {
    return (
        <div className="products">
            {selectedProduct === 'Autos & Vehicles' && <AutoProducts products={products} />}
            {selectedProduct === 'Baby & Children\'s Products' && <BabyProducts products={products} />}
            {selectedProduct === 'Beauty Products & Services' && <p className="text-center">There are no {selectedProduct} products available</p>}
            {selectedProduct === 'Computers & Peripherals' && <p className="text-center">There are no {selectedProduct} products available</p>}
            {selectedProduct === 'Consumer Electronics' && <p className="text-center">There are no {selectedProduct} products available</p>}
            {selectedProduct === 'Other' && <p className="text-center">There are no {selectedProduct} products available</p>}
            {selectedProduct === 'All Products' && <AllProducts allProducts={products} />}
        </div>
    )
}