Feature rows (motion)

"use client"

/**
 * The `feature-rows` 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 { FeatureRowsMotion } from "@registry/sections/feature-rows-motion"

import { ROWS } from "./content"

export function Demo() {
  return (
    <FeatureRowsMotion
      eyebrow="How it works"
      title="Install a piece, own the source"
      items={ROWS}
      align="center"
    />
  )
}

"use client"

/**
 * FeatureRowsMotion — alternating feature rows, each revealed as it scrolls in.
 *
 * Dependencies: react, @/components/motion/slots,
 * @/components/sections/feature-rows.
 */

import { StaggerList, StaggerListItem } from "@/components/motion/slots"
import { FeatureRows, type FeatureRowsProps } from "@/components/sections/feature-rows"

export type FeatureRowsMotionProps = Omit<FeatureRowsProps, "listAs" | "itemAs">

export function FeatureRowsMotion(props: FeatureRowsMotionProps) {
  return <FeatureRows {...props} listAs={StaggerList} itemAs={StaggerListItem} />
}