Loading...
Loading...
> Filter panel with difficulty, setup time, dependencies, and feature filters
1import { AdvancedFilters, type FilterOptions } from '@/components/library';
1'use client';23import { useState } from 'react';4import { AdvancedFilters, type FilterOptions } from '@/components/library';56export default function Page() {7 const [filters, setFilters] = useState<FilterOptions>({});8 const [activeFilterCount, setActiveFilterCount] = useState(0);910 const handleClearFilters = () => {11 setFilters({});12 setActiveFilterCount(0);13 };1415 return (16 <AdvancedFilters17 filters={filters}18 onFilterChange={setFilters}19 onClearFilters={handleClearFilters}20 activeFilterCount={activeFilterCount}21 />22 );23}
| Prop | Type | Default | Description |
|---|---|---|---|
| filters* | FilterOptions | - | Current filter state object |
| onFilterChange* | (filters: FilterOptions) => void | - | Callback when filters change |
| onClearFilters* | () => void | - | Callback to clear all filters |
| activeFilterCount* | number | - | Number of active filters (for badge display) |
1export interface FilterOptions {2 difficulty?: 'Beginner' | 'Intermediate' | 'Advanced';3 setupTime?: 'quick' | 'medium' | 'long'; // < 10min, 10-30min, > 30min4 hasDependencies?: boolean;5 feature?: string;6}