AutoProducts Component

The AutoProducts component is responsible for displaying a list of products categorized specifically under “Auto & Vehicles Products”. It filters the provided product data and presents the relevant products in a responsive grid layout.

Documentation for AutoProducts Component

Overview

The AutoProducts component takes a list of products and filters out those categorized under “Auto & Vehicles 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 “Autos & Vehicles 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 auto 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 “Autos & Vehicles 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 AutoProducts({ products }: { products: Product[] }) {
    const autoProducts = products.filter((product) => product.category === 'Autos & Vehicles');

    return (
        <div>
        {autoProducts.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
                {autoProducts.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}`}>
                            <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>
    );
}