BabyProducts Component

The BabyProducts component is responsible for displaying a list of products categorized specifically under “Baby & Children’s Products”. It filters the provided product data and presents the relevant products in a responsive grid layout.

Documentation for BabyProducts Component

Overview

The BabyProducts component takes a list of products and filters out those categorized under “Baby & Children’s Products”. It displays the filtered products in a grid, with each product card showing the product image, name, and price. If no products are found in this category, a message is displayed.

Implementation Details

• Props:

  • products: An array of product objects. Each product should conform to the Product type, which includes properties such as id, name, price, imageUrl, and category.

• Filtering:

  • The component filters the products based on the category, selecting only those with the category “Baby & Children’s Products”.

• Responsive Design:

  • The product grid adapts to different screen sizes, with a single column layout on small screens, two columns on medium screens, and three columns on large screens.

Component Structure

• Product Grid:

  • The component displays the filtered baby products in a responsive grid layout. Each product is presented in a card format with the following elements:
    • Image: The product’s image is displayed at the top of the card.
    • Name: The product’s name is shown below the image.
    • Price: The product’s price is displayed below the name.

• Product Card:

  • Each product card is clickable, with a Link component directing the user to the product’s detailed page on the /market/[id] route.
  • The card is styled with padding, a border, and rounded corners, and includes hover effects for an enhanced user experience.

• Fallback Message:

  • If no products in the “Baby & Children’s Products” category are found, the component displays a message: “There are no products.”

Code Block

import { Product } from "@/types/global";
import Link from "next/link";
import Image from "next/image";

export default function BabyProducts({ products }: { products: Product[] }) {
    const babyProducts = products.filter((product) => product.category === 'Baby & Children\'s Products');

    return (
        <div>
            {babyProducts.length > 0 ? (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
                    {babyProducts.map((product) => (
                        <div key={product.id} className="product-card bg-white p-4 border border-gray-300 rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-200 flex flex-col items-center">
                            <Link href={`/market/${product.id}`} className="product-link w-full">
                                <div className="image-container w-full h-80 mb-4 relative">
                                    <Image src={product.imageUrl} alt={product.name} className="rounded-md w-full h-full object-cover" />
                                </div>
                                <h3 className="product-name text-xl font-semibold mb-2">{product.name}</h3>
                                <p className="product-price text-lg text-gray-700">{product.price}</p>
                            </Link>
                        </div>
                    ))}
                </div>
            ) : (
                <p className="text-center text-xl text-gray-500">There are no products</p>
            )}
        </div>
    );
}