Section Feeds
Top-level composer that combines FilterSection and ContentListSection in a 4-column responsive grid. Bring your own data — no seed values baked in.
SectionFeeds is the ready-to-use feeds page layout. It wires up internal state for accordion open/close and item expansion so you only need to pass items, filterTypes and filterTopics. All three are props — import your own seed data in the consuming page.
Installation
npx shadcn@latest add @adv/section-feedsUsage
import { SectionFeeds } from '@/components/section-feeds';
import { myItems, myFilterTypes, myFilterTopics } from '@/data/content';
export default function FeedsPage() {
return (
<SectionFeeds
items={myItems}
filterTypes={myFilterTypes}
filterTopics={myFilterTopics}
/>
);
}Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ContentItem[] | — | Content items to display in the list panel. |
filterTypes | FilterOption[] | — | Options for the "Type" filter accordion group. |
filterTopics | FilterOption[] | — | Options for the "Topic" filter accordion group. |
defaultOpenAccordions | string[] | ["type", "topic"] | Accordion group keys open on first render. |
defaultExpandedItem | string | null | first item id | Id of the item expanded on first render. Pass null to start collapsed. |
Content List Section
A full content list panel with a header row (Date / Name / Type) and a stack of expandable ContentListItem rows. Accepts items via props.
Magazine Grid
A pure calculation utility that paginates a list of sized grid items across fixed-size pages, calling onPaginate with the result. Renders nothing.