Product Search Component

Build a product search component that manages search filters using URL query parameters. The component should use type-safe query parameters with default values and customizable update behavior.

Requirements

Create a React component that manages product search with the following URL-based state:

Query Parameters

The component should manage these filters via URL query parameters:

• Search query: Text search term (defaults to empty string)
• Category: Product category - one of "electronics", "clothing", "books", or "all" (defaults to "all")
• Min price: Minimum price filter as an integer (defaults to 0)
• Page: Current page number (defaults to 1)

Behavior Requirements

1. Default Value Handling: When any filter is set to its default value, it should be removed from the URL to keep URLs clean
2. History Mode Configuration:
   • Search query, category, and price changes should replace the current history entry
   • Page number changes should create new history entries (for back/forward navigation)
3. Type Safety: All query parameters must be properly typed (strings as strings, numbers as numbers, enum values as literal types)

Component Implementation

Create a component that:

1. Reads and manages the four query parameters listed above
2. Displays the current values of all filters
3. Provides interactive controls (input fields, buttons, or similar) to modify each filter

@generates

API

export function ProductList(): JSX.Element;

Test Cases

• Setting search query to a non-empty value adds it to URL; setting to empty string removes it from URL @test
• Category parameter is removed from URL when set to default value "all" @test
• Min price parameter is removed from URL when set to default value 0 @test
• Page parameter uses push history mode (creates new history entries) @test

Dependencies { .dependencies }

nuqs { .dependency }

Provides type-safe URL query parameter state management.

react { .dependency }

Provides React framework for building the component.