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.
ContentListSection renders the right-hand panel of a feeds layout: a column-header row followed by one ContentListItem per entry in items. Pass your data via props — no seed data is baked in. Pair with FilterSection inside SectionFeeds for a full layout.
Installation
npx shadcn@latest add @adv/content-list-sectionUsage
import { ContentListSection } from '@/components/sectionAccordion/content-list-section';
const items = [
{ id: '1', date: '2025.6.03', name: 'Stripe API Workshop', type: 'VIDEO' as const, summary: '...', author: 'Stripe' },
];
export function MyFeed() {
const [expandedItem, setExpandedItem] = useState<string | null>('1');
return (
<ContentListSection
items={items}
expandedItem={expandedItem}
setExpandedItem={setExpandedItem}
/>
);
}Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ContentItem[] | — | Array of content items to render. |
expandedItem | string | null | — | Id of the currently expanded item, or null. |
setExpandedItem | (id: string | null) => void | — | Setter called when a row is toggled. |
columnLabels | [string, string, string] | ["/ DATE", "/ NAME", "/ TYPE"] | Override column header text. |
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.
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.