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.

ContentListItem renders a single row in a content feed list. Click a row to expand it, revealing summary, author and an optional Watch CTA button (for VIDEO items with a link). Animation is handled by GSAP — the demo disables SSR to avoid hydration mismatches.

Installation

npx shadcn@latest add @adv/content-list-item

Usage

import { ContentListItem } from '@/components/sectionAccordion/content-list-item';

const item = {
  id: '1',
  date: '2025.6.03',
  name: 'Building with Stripe APIs',
  type: 'VIDEO' as const,
  summary: 'A deep dive into Stripe's developer APIs.',
  author: 'Stripe Developers',
  link: 'https://example.com',
};

export function MyList() {
  const [expanded, setExpanded] = useState<string | null>(null);

  return (
    <ContentListItem
      item={item}
      isExpanded={expanded === item.id}
      onToggle={(id) => setExpanded((prev) => (prev === id ? null : id))}
    />
  );
}

Example

Props

Prop	Type	Default	Description
`item`	`ContentItem`	—	The content item data object.
`isExpanded`	`boolean`	—	Whether this row is currently expanded.
`onToggle`	`(id: string) => void`	—	Called with the item `id` when the row header is clicked.
`ctaLabel`	`string`	`"Watch"`	Label for the link CTA shown on VIDEO items with a `link`.

ContentItem type

interface ContentItem {
  id: string
  date: string
  name: string
  type: 'VIDEO' | 'BLOG' | 'COMMUNITY'
  summary?: string
  author?: string
  link?: string
}