Product Filter with Scroll Control

Build a React component that displays a filterable product list with URL-based state management and appropriate scroll behavior.

Requirements

Component Structure

Create a ProductFilter component that:

• Displays a list of 50 products (can be mock data with id, name, category)
• Shows filter controls for product category (Electronics, Clothing, Books, All)
• Shows a search input field for product names
• Manages filter state using URL query parameters
• Has a "Reset Filters" button that clears all filters

Scroll Behavior

Implement the following scroll behaviors:

1. When the user changes the category filter, the page should scroll to the top
2. When the user types in the search field, the page should maintain its current scroll position (no scroll to top)
3. When the user clicks "Reset Filters", the page should scroll to the top

State Management

• Category filter should be stored in URL as category parameter
• Search query should be stored in URL as search parameter
• Both filters should work together to filter the product list
• URL should update as filters change

Test Cases

• When category changes from "All" to "Electronics", page scrolls to top and URL updates to ?category=electronics @test
• When typing "laptop" in search, URL updates to ?search=laptop but page maintains scroll position @test
• When clicking "Reset Filters" with active filters, URL clears both parameters and page scrolls to top @test

Implementation

@generates

API

export interface Product {
  id: number;
  name: string;
  category: 'electronics' | 'clothing' | 'books';
}

export function ProductFilter(): JSX.Element;

Dependencies { .dependencies }

nuqs { .dependency }

Provides type-safe URL query parameter state management.

react { .dependency }

Provides the React framework for building the component.