Card list (motion)

"use client"

/**
 * The `card-list` demo, with the motion variant swapped in.
 *
 * Identical props: the motion variant only changes which slot components
 * the static section renders through.
 *
 * `"use client"` is required here, not incidental: the motion variant is a
 * client component, and icon components cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { CardListMotion } from "@registry/sections/card-list-motion"

import { POSTS } from "./content"

export function Demo() {
  return (
    <CardListMotion
      eyebrow="Blog"
      title="Latest writing"
      description="Cards use a stretched link, so the accessible name is the title rather than the whole card."
      items={POSTS}
    />
  )
}

"use client"

/**
 * CardListMotion — the card grid with a staggered entrance.
 *
 * Cards arrive in sequence as the grid scrolls in.
 *
 * A genuine wrapper: it renders the static `CardList` and only swaps the list
 * slots, so no markup, styling or accessibility behaviour is duplicated. *
 * Dependencies: react, @/components/motion/slots,
 * @/components/sections/card-list.
 */

import { StaggerList, StaggerListItem } from "@/components/motion/slots"
import { CardList, type CardListProps } from "@/components/sections/card-list"

export type CardListMotionProps = Omit<CardListProps, "listAs" | "itemAs">

export function CardListMotion(props: CardListMotionProps) {
  return <CardList {...props} listAs={StaggerList} itemAs={StaggerListItem} />
}