Feed Section
A filterable, paginated feed list with a sticky GSAP scramble heading, a hover image-preview cursor, and a mobile drawer for filters.
FeedSection renders a full-page feeds layout with Type and Topic accordion filters (sidebar on desktop, a Drawer sheet on mobile), a hover image preview, load-more pagination, and GSAP expand/collapse animations per item. The sticky header scrambles to leet-speak on stick. All data is provided via props.
Installation
npx shadcn@latest add @adv/feed-sectionUsage
import { FeedSection } from '@/components/sections/feed-section';
<FeedSection
items={feedItems}
filterTypes={[{ id: 'case-study', label: 'Case Study', count: 4 }]}
filterTopics={[{ id: 'ai', label: 'AI', count: 5 }]}
heading="FEEDS"
showFilters
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FeedItem[] | — | Feed items: { id, date, name, type, tags, summary?, author?, link?, image? }. |
filterTypes | FilterOption[] | [] | Options for the "Type" accordion filter. |
filterTopics | FilterOption[] | [] | Options for the "Topic" accordion filter. |
initialFilters | Record<string, string[]> | {} | Pre-selected filter ids per group. |
initialFiltersOpen | boolean | false | Open filter accordions on mount. |
showFilters | boolean | true | Show/hide the filter sidebar and mobile drawer. |
heading | string | "FEEDS" | Sticky header label and scramble target. |
showTags | boolean | false | Show item tags in the collapsed row. |
getItemVisibility | (item) => 'visible' | 'hidden' | 'inert' | () => 'visible' | Per-item visibility. 'hidden' excludes; 'inert' disables the link button. |