Filter Section
A sidebar filter panel composing two AccordionFilterGroup instances (Type and Topic). Accepts filter option arrays via props so no seed data is baked in.
FilterSection renders a "/ FILTER" header with a "CLEAR FILTERS" button and two collapsible accordion groups backed by AccordionFilterGroup. Pass your own filterTypes and filterTopics arrays, lift state for openAccordions, and optionally wire onTypeToggle / onTopicToggle callbacks for controlled filtering.
Installation
npx shadcn@latest add @adv/filter-sectionUsage
import { FilterSection } from '@/components/sectionAccordion/filter-section';
const filterTypes = [
{ id: 'video', label: 'Video', count: 21 },
{ id: 'blog', label: 'Blog', count: 53 },
];
const filterTopics = [
{ id: 'aws', label: 'AWS', count: 14 },
];
export function Sidebar() {
const [openAccordions, setOpenAccordions] = useState(['type']);
return (
<FilterSection
filterTypes={filterTypes}
filterTopics={filterTopics}
openAccordions={openAccordions}
setOpenAccordions={setOpenAccordions}
onClearFilters={() => console.log('cleared')}
/>
);
}Example
/ FILTER
Props
| Prop | Type | Default | Description |
|---|---|---|---|
filterTypes | FilterOption[] | — | Options for the "Type" accordion group. |
filterTopics | FilterOption[] | — | Options for the "Topic" accordion group. |
openAccordions | string[] | — | Controlled list of open accordion values. |
setOpenAccordions | Dispatch<SetStateAction<string[]>> | — | State setter for openAccordions. |
selectedTypes | string[] | — | Selected type filter ids (optional, controlled). |
selectedTopics | string[] | — | Selected topic filter ids (optional, controlled). |
onTypeToggle | (id: string) => void | — | Callback when a type checkbox is toggled. |
onTopicToggle | (id: string) => void | — | Callback when a topic checkbox is toggled. |
onClearFilters | () => void | — | Callback for the "CLEAR FILTERS" button. |
Accordion Filter Group
A single animated accordion panel containing labelled checkboxes, used as a filter group inside a sidebar. Smooth open/close transitions driven by CSS and useLayoutEffect — no GSAP required.
Content List Item
An expandable content row showing date, name and type badge. Expansion is driven by GSAP (height + opacity tween) with a rotating Plus icon.