[blocks]: Filter Component for Ecommerce like Sidebar

[a95z]

Description

I would like to request a Filter Component Block for ecommerce pages, designed to work like a sidebar but built with Shadcn Canary and Tailwind CSS v4. This component should be reusable (similar to the Shadcn sidebar) and dynamically render filter groups from JSON.

---

Key Features & Functionalities

1. Dynamic Filter Groups

   • Accept a JSON configuration for filter groups (e.g., categories, brands, sizes).
   • Each group can render checkbox lists with item counts (e.g., Shoes (12)), where the count is smaller and muted.
   • Groups should be reusable and styled consistently with Shadcn components.

2. Price Range Slider

   • Support range filters (e.g., price range) using Shadcn’s Slider component.
   • Display the current selected range (e.g., $10 – $200).

3. Search Params Integration

   • Selecting or deselecting filters should update the searchParams dynamically.
   • For range filters, selected min/max values should map to query params like price_min and price_max.

4. UI & UX Standards

   • Checkbox should be left-aligned next to the text.
   • Filter group body should have a distinct background color from the header.
   • Groups should have overflow-y-auto with a fixed max height.
   • Built with accessibility and responsiveness in mind.

5. Component API

   • groups: FilterGroup[] where each group can be type: "checkbox" or type: "range".
   • onChange callback to propagate selected filters as an object.
   • Use Shadcn primitives: Checkbox, Label, ScrollArea, and Slider.

---

Example JSON

[
  {
    "id": "categories",
    "title": "Categories",
    "type": "checkbox",
    "items": [
      { "label": "Shoes", "value": "shoes", "count": 12 },
      { "label": "Bags", "value": "bags", "count": 5 },
      { "label": "Watches", "value": "watches", "count": 8 }
    ]
  },
  {
    "id": "brands",
    "title": "Brands",
    "type": "checkbox",
    "items": [
      { "label": "Nike", "value": "nike", "count": 4 },
      { "label": "Adidas", "value": "adidas", "count": 3 },
      { "label": "Puma", "value": "puma", "count": 2 }
    ]
  },
  {
    "id": "price",
    "title": "Price Range",
    "type": "range",
    "range": { "min": 0, "max": 500, "step": 10 }
  }
]

### Example

_No response_