{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee-testimonials",
  "title": "Marquee Testimonials",
  "description": "Infinite-scroll horizontal testimonial strip with optional double row",
  "files": [
    {
      "path": "registry/pioneerui/marquee-testimonials.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface MarqueeTestimonialItem {\n  quote: string\n  name: string\n  role?: string\n  company?: string\n  avatar?: string\n}\n\nexport interface MarqueeTestimonialsProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: MarqueeTestimonialItem[]\n  speed?: number\n  pauseOnHover?: boolean\n  reverse?: boolean\n  rows?: 1 | 2\n}\n\nfunction TestimonialChip({ item }: { item: MarqueeTestimonialItem }) {\n  return (\n    <div className=\"flex w-72 shrink-0 flex-col gap-3 rounded-xl border bg-card p-5 shadow-sm\">\n      <p className=\"line-clamp-3 text-sm leading-relaxed text-foreground\">\n        &ldquo;{item.quote}&rdquo;\n      </p>\n      <div className=\"mt-auto flex items-center gap-2.5\">\n        {item.avatar ? (\n          <img\n            src={item.avatar}\n            alt={item.name}\n            className=\"h-8 w-8 rounded-full object-cover\"\n          />\n        ) : (\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary\">\n            {item.name.charAt(0)}\n          </div>\n        )}\n        <div>\n          <p className=\"text-xs font-semibold text-foreground\">{item.name}</p>\n          {(item.role || item.company) && (\n            <p className=\"text-xs text-muted-foreground\">\n              {item.role}\n              {item.role && item.company ? \" · \" : \"\"}\n              {item.company}\n            </p>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\ninterface RowProps {\n  items: MarqueeTestimonialItem[]\n  duration: string\n  reverse?: boolean\n  pauseOnHover?: boolean\n}\n\nfunction MarqueeRow({ items, duration, reverse, pauseOnHover }: RowProps) {\n  return (\n    <div\n      className={cn(\n        \"group flex gap-4 overflow-hidden\",\n      )}\n    >\n      {[0, 1].map((key) => (\n        <div\n          key={key}\n          className={cn(\n            \"flex min-w-full shrink-0 gap-4\",\n            pauseOnHover && \"group-hover:[animation-play-state:paused]\",\n          )}\n          style={{\n            animation: `marquee ${duration} linear infinite${reverse ? \" reverse\" : \"\"}`,\n          }}\n        >\n          {items.map((item, i) => (\n            <TestimonialChip key={i} item={item} />\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function MarqueeTestimonials({\n  items,\n  speed = 30,\n  pauseOnHover = true,\n  reverse = false,\n  rows = 1,\n  className,\n  ...props\n}: MarqueeTestimonialsProps) {\n  // --duration drives the built-in `marquee` Tailwind animation keyframe\n  const duration = `${(items.length * 80) / speed}s`\n\n  return (\n    <div\n      className={cn(\"relative overflow-hidden\", className)}\n      style={{ \"--duration\": duration } as React.CSSProperties}\n      {...props}\n    >\n      {/* Edge fade masks */}\n      <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 w-24 bg-gradient-to-r from-background to-transparent\" />\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 z-10 w-24 bg-gradient-to-l from-background to-transparent\" />\n\n      <div className=\"flex flex-col gap-4\">\n        <MarqueeRow\n          items={items}\n          duration={duration}\n          reverse={reverse}\n          pauseOnHover={pauseOnHover}\n        />\n        {rows === 2 && (\n          <MarqueeRow\n            items={items}\n            duration={duration}\n            reverse={!reverse}\n            pauseOnHover={pauseOnHover}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/marquee-testimonials.tsx"
    }
  ],
  "type": "registry:ui"
}