1function ProductList() {
2  const [filters, setFilters] = useState({
3    category: [],
4    price: { min: 0, max: 1000 },
5    rating: null
6  });
7  
8  const [products, setProducts] = useState([]);
9  const [sortBy, setSortBy] = useState('price');
10  
11  const filteredProducts = products
12    .filter(product => {
13      const categoryMatch = filters.category.length === 0 || 
14        filters.category.includes(product.category);
15      const priceMatch = product.price >= filters.price.min && 
16        product.price <= filters.price.max;
17      const ratingMatch = !filters.rating || 
18        product.rating >= filters.rating;
19      return categoryMatch &amp;&amp; priceMatch &amp;&amp; ratingMatch;
20    })
21    .sort((a, b) => {
22      if (sortBy === 'price') return a.price - b.price;
23      if (sortBy === 'rating') return b.rating - a.rating;
24      return 0;
25    });
26
27  const updateFilters = (newFilters) => {
28    setFilters(prev => ({ ...prev, ...newFilters }));
29  };
30
31  useEffect(() => {
32    fetch('/api/products')
33      .then(res => res.json())
34      .then(setProducts);
35  }, []);
36
37  return (
38    <div>
39      <FilterPanel filters={filters} onChange={updateFilters} />
40      <SortControls value={sortBy} onChange={setSortBy} />
41      <Grid items={filteredProducts} />
42    </div>
43  );
44}