Market Page

This is the market page where users can browse and search for products, explore nearby shops, and filter products by category.

Documentation for Market Component

Overview

The Market component allows users to browse various products, search for specific items, explore nearby shops, and filter products by different categories. It serves as the primary interface for the platform’s marketplace functionality.

Implementation Details

• State Management:

  • searchQuery: Tracks the user’s input in the search bar.
  • selected: Stores the currently selected product category.
  • products: An array storing product data for display in the Products component.

• Product Filtering:

  • The filteredProducts array is derived from products and includes only those products that match the selected category and search query.

• Component Structure:

  • Header: Contains the market title and the search bar.
  • NearbyShops: A section highlighting shops near the user’s location, with an option to explore more.
  • Types: A set of buttons allowing users to filter products by category.
  • MainContent: Displays a list of products that match the search query and selected category, using the Products component.

Code Block

'use client'
import { useState } from 'react'; // Import useState if not already imported
import type { Product } from '@/types/global';
import blackwoman from '@/public/images/home/blackWoman.jpg'; // Example image
import anime from '@/public/images/profile/lucky star.jpg';
import Products from '@/components/market/Products/Product';
import styles from './market.module.css'
import { Button } from "@nextui-org/react";

export default function Market() {
    const [searchQuery, setSearchQuery] = useState<string>("");
    const [selected, setSelected] = useState<string>("All Products");

    const handleClick = (value: string) => {
        setSelected(value);
    };

    const [products] = useState<Product[]>([
        { id: 1, name: 'Sample Product', description: '', price: '$10.00', type: '', category: 'Autos & Vehicles', stock: 1, imageUrl: blackwoman },
        { id: 2, name: 'Another Product', description: 'Another sample product description.', price: '$20.00', type: 'Used', category: 'Baby & Children\'s Products', stock: 2, imageUrl: blackwoman },
        { id: 3, name: 'A 3rd Product', description: 'A 3rd product description.', price: '$20.00', type: 'Used', category: 'Autos & Vehicles', stock: 3, imageUrl: anime },
        { id: 4, name: 'Another Product', description: 'Another sample product description.', price: '$20.00', type: 'Used', category: 'Baby & Children\'s Products', stock: 2, imageUrl: blackwoman},
    ]);

    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSearchQuery(event.target.value);
    };

    // Filter products based on selected category and search query
    const filteredProducts = products.filter(product =>
        (selected === "All Products" || product.category === selected) &&
        (product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
            product.description.toLowerCase().includes(searchQuery.toLowerCase()))
    );

    return (
        <div className="market-main p-5">
            <header className="flex flex-col lg:flex-row items-center lg:items-start p-2">
                <h1 className="market-header text-2xl mb-2 lg:mb-0 lg:mr-auto lg:text-left text-center lg:text-4xl">Market</h1>
                <div className="search w-full lg:w-1/2 mb-5 lg:mb-0 lg:ml-auto">
                    <input
                    type="text"
                    placeholder="Search for products"
                    className="search-bar w-full p-2 border border-gray-300 rounded-md text-lg"
                    value={searchQuery}
                    onChange={handleSearchChange}/>
                </div>
            </header>

            <div className="nearby-shops bg-green-200 p-4 rounded-lg mb-5 relative">
                <h2 className="mb-2 text-2xl lg:text-4xl">Nearby Shops</h2>
                <p className="mb-5">Find shops near to you based on your location and connect with them directly.</p>
                <Button className="explore-btn bg-black text-white p-2 rounded-md">Explore</Button>
            </div>

            <div className="types flex gap-2 mb-5 overflow-x-auto whitespace-nowrap">
                <Button className={`${styles.typeBtn} ${selected === "All Products" ? styles.active : ""}`}
                onClick={() => handleClick("All Products")}>
                        All Products
                </Button>
                <Button className={`${styles.typeBtn} ${selected === "Autos & Vehicles" ? styles.active : ""}`}
                onClick={() => handleClick("Autos & Vehicles")}>
                    Autos & Vehicles
                </Button>
                <Button className={`${styles.typeBtn} ${selected === "Baby & Children's Products" ? styles.active : ""} `}
                onClick={() => handleClick("Baby & Children's Products")}>
                    Baby & Children's Products
                </Button>
                <Button className={`${styles.typeBtn} ${selected === "Beauty Products & Services" ? styles.active : ""}`}
                onClick={() => handleClick("Beauty Products & Services")}>
                    Beauty Products & Services
                </Button>
                <Button className={`${styles.typeBtn} ${selected === "Computers & Peripherals" ? styles.active : ""}`}
                onClick={() => handleClick("Computers & Peripherals")}>
                    Computers & Peripherals
                </Button>
                <Button className={`${styles.typeBtn} ${selected === "Consumer Electronics" ? styles.active : ""}`}
                onClick={() => handleClick("Consumer Electronics")}>
                    Consumer Electronics
                </Button>
                <Button className={`${styles.typeBtn} ${selected === "Other" ? styles.active : ""}`}
                onClick={() => handleClick("Other")}>
                    Other
                </Button>
            </div>

            <main className="main-content flex flex-col items-center rounded-lg p-5 overflow-auto">
                {products.length > 0 ? (
                    <Products selectedProduct={selected} products={filteredProducts}/>
                ) : (
                    <p className="text-center text-xl text-gray-500">There are no products</p>
                )}
            </main>
        </div>
    );
}