36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
"use client"
|
|
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { ProductCard } from "./product-card"
|
|
import { Product } from "@/types/product"
|
|
|
|
interface ProductGridProps {
|
|
products: Product[]
|
|
}
|
|
|
|
export function ProductGrid({ products }: ProductGridProps) {
|
|
const searchParams = useSearchParams()
|
|
|
|
const minPrice = searchParams.get('minPrice')
|
|
const maxPrice = searchParams.get('maxPrice')
|
|
const categories = searchParams.get('categories')
|
|
|
|
const filteredProducts = products.filter(product => {
|
|
const priceInRange = (!minPrice || product.price >= parseInt(minPrice)) &&
|
|
(!maxPrice || product.price <= parseInt(maxPrice))
|
|
|
|
const categoryMatch = !categories || categories.split(',').includes(product.category)
|
|
|
|
return priceInRange && categoryMatch
|
|
})
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
|
|
{filteredProducts.map((product) => (
|
|
<ProductCard key={product.id} product={product} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|