{
  "name": "testimonial-marquee",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [],
  "description": "A smooth, infinite scrolling marquee component for showcasing social proof and testimonials.",
  "files": [
    {
      "path": "components/ui/testimonial-marquee.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@workspace/ui/lib/utils\"\n\nexport interface Testimonial {\n    name: string\n    text: string\n    avatar: string\n    role?: string\n    username?: string\n    profileLink?: string\n}\n\nexport interface TestimonialMarqueeProps {\n    items: Testimonial[]\n    variant?: \"default\" | \"stacked\" | \"dual\" | \"flush\" | \"flush-dual\"\n    className?: string\n    speed?: number\n    containerClassName?: string\n}\n\n\nconst MarqueeStyles = React.memo(() => (\n    <style>\n        {`\n        @keyframes marquee-left {\n          from { transform: translate3d(0, 0, 0); }\n          to { transform: translate3d(-100%, 0, 0); }\n        }\n        @keyframes marquee-right {\n          from { transform: translate3d(-100%, 0, 0); }\n          to { transform: translate3d(0, 0, 0); }\n        }\n        .animate-marquee-left {\n           animation: marquee-left var(--duration) linear infinite;\n        }\n        .animate-marquee-right {\n           animation: marquee-right var(--duration) linear infinite;\n        }\n        `}\n    </style>\n))\nMarqueeStyles.displayName = \"MarqueeStyles\"\n\nconst MarqueeRow = React.memo(({\n    children,\n    direction = \"left\",\n    speed = 40,\n    className,\n    pauseOnHover = true\n}: {\n    children: React.ReactNode,\n    direction?: \"left\" | \"right\"\n    speed?: number,\n    className?: string,\n    pauseOnHover?: boolean\n}) => {\n    return (\n        <div className={cn(\"group flex overflow-hidden p-2 [--gap:1rem]\", className)}>\n            <div\n                className={cn(\"flex shrink-0 justify-start [gap:var(--gap)] min-w-full pr-[var(--gap)] will-change-transform [backface-visibility:hidden]\",\n                    direction === \"left\" ? \"animate-marquee-left\" : \"animate-marquee-right\",\n                    pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n                )}\n                style={{\n                    \"--duration\": `${speed}s`,\n                } as React.CSSProperties}\n            >\n                {children}\n            </div>\n            <div\n                aria-hidden=\"true\"\n                className={cn(\"flex shrink-0 justify-start [gap:var(--gap)] min-w-full pr-[var(--gap)] will-change-transform [backface-visibility:hidden]\",\n                    direction === \"left\" ? \"animate-marquee-left\" : \"animate-marquee-right\",\n                    pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n                )}\n                style={{\n                    \"--duration\": `${speed}s`,\n                } as React.CSSProperties}\n            >\n                {children}\n            </div>\n        </div>\n    )\n})\nMarqueeRow.displayName = \"MarqueeRow\"\n\n\nconst TestimonialCard = React.memo(({ item, variant = \"default\" }: { item: Testimonial, variant?: \"default\" | \"flush\" }) => {\n    if (variant === \"flush\") {\n        return (\n            <div className=\"relative group flex h-auto w-[350px] shrink-0 flex-col justify-between overflow-hidden rounded-none border-r border-border bg-black/5 dark:bg-white/5 p-6 transition-all hover:bg-black/10 dark:hover:bg-white/10 transform-gpu [backface-visibility:hidden]\">\n                <div className=\"absolute inset-0 bg-gradient-to-br from-black/5 dark:from-white/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100\" />\n\n                <div className=\"relative z-10 flex flex-col gap-4\">\n                    <p className=\"text-sm leading-relaxed text-muted-foreground line-clamp-4\">\n                        &quot;{item.text}&quot;\n                    </p>\n\n                    <div className=\"flex items-center gap-3 pt-2\">\n                        <div className=\"h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border\">\n                            <img src={item.avatar} alt={item.name} className=\"h-full w-full object-cover\" loading=\"eager\" />\n                        </div>\n                        <div className=\"flex flex-col\">\n                            <span className=\"text-sm font-medium text-foreground\">{item.name}</span>\n                            {item.username && (\n                                <span className=\"text-xs text-muted-foreground\">@{item.username}</span>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        )\n    }\n\n    return (\n        <div className=\"relative group flex h-auto w-[350px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border border-border bg-black/5 dark:bg-white/5 p-6 transition-all hover:bg-black/10 dark:hover:bg-white/10 hover:shadow-xl hover:shadow-black/5 hover:-translate-y-1 transform-gpu [backface-visibility:hidden]\">\n            <div className=\"absolute inset-0 bg-gradient-to-br from-black/5 dark:from-white/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100\" />\n\n            <div className=\"relative z-10 flex flex-col gap-4\">\n                <p className=\"text-sm leading-relaxed text-muted-foreground line-clamp-4\">\n                    &quot;{item.text}&quot;\n                </p>\n\n                <div className=\"flex items-center gap-3 pt-2\">\n                    <div className=\"h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border\">\n                        <img src={item.avatar} alt={item.name} className=\"h-full w-full object-cover\" loading=\"eager\" />\n                    </div>\n                    <div className=\"flex flex-col\">\n                        <span className=\"text-sm font-medium text-foreground\">{item.name}</span>\n                        {item.username && (\n                            <span className=\"text-xs text-muted-foreground\">@{item.username}</span>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n})\nTestimonialCard.displayName = \"TestimonialCard\"\n\nexport function TestimonialMarquee({ items, variant = \"default\", className, speed = 30, containerClassName }: TestimonialMarqueeProps) {\n    // Combine custom className with container styling if needed\n    const cnContainer = cn(containerClassName, className)\n\n    const itemsToDisplay = React.useMemo(() => {\n        let result = [...items]\n        // Ensure we have enough items to fill the width for smooth animation\n        // 10 items is a safe heuristic for most screen sizes with 350px cards\n        while (result.length < 10) {\n            result = [...result, ...items]\n        }\n        return result\n    }, [items])\n\n    return (\n        <React.Fragment>\n            <MarqueeStyles />\n            {variant === \"dual\" ? (\n                <div className={cn(\"flex flex-col gap-4 py-8 overflow-hidden\", containerClassName)}>\n                    <MarqueeRow speed={speed} direction=\"left\">\n                        {itemsToDisplay.slice(0, Math.ceil(itemsToDisplay.length / 2)).map((item, i) => <TestimonialCard key={`row1-${i}`} item={item} />)}\n                    </MarqueeRow>\n                    <MarqueeRow speed={speed} direction=\"right\">\n                        {itemsToDisplay.slice(Math.ceil(itemsToDisplay.length / 2)).map((item, i) => <TestimonialCard key={`row2-${i}`} item={item} />)}\n                    </MarqueeRow>\n                </div>\n            ) : variant === \"stacked\" ? (\n                <div className={cn(\"flex flex-col gap-2 py-8 overflow-hidden h-[600px] justify-center rotate-[-2deg] scale-110\", containerClassName)}>\n                    <div className=\"absolute inset-0 z-10 bg-gradient-to-r from-background via-transparent to-background pointer-events-none\" />\n                    <MarqueeRow speed={speed * 1.5} direction=\"left\" className=\"[--gap:0.75rem]\">\n                        {itemsToDisplay.slice(0, Math.ceil(itemsToDisplay.length / 3)).map((item, i) => <TestimonialCard key={`s-row1-${i}`} item={item} />)}\n                    </MarqueeRow>\n                    <MarqueeRow speed={speed * 1.2} direction=\"right\" className=\"[--gap:0.75rem]\">\n                        {itemsToDisplay.slice(Math.ceil(itemsToDisplay.length / 3), Math.ceil(itemsToDisplay.length / 3) * 2).map((item, i) => <TestimonialCard key={`s-row2-${i}`} item={item} />)}\n                    </MarqueeRow>\n                    <MarqueeRow speed={speed * 1.5} direction=\"left\" className=\"[--gap:0.75rem]\">\n                        {itemsToDisplay.slice(Math.ceil(itemsToDisplay.length / 3) * 2).map((item, i) => <TestimonialCard key={`s-row3-${i}`} item={item} />)}\n                    </MarqueeRow>\n                </div>\n            ) : variant === \"flush\" ? (\n                <div className={cn(\"overflow-hidden border-y border-border bg-background relative\", cnContainer)}>\n                    <MarqueeRow speed={speed} direction=\"left\" className=\"[--gap:0rem] p-0\">\n                        {itemsToDisplay.map((item, i) => <TestimonialCard key={`flush-${i}`} item={item} variant=\"flush\" />)}\n                    </MarqueeRow>\n                    <div className=\"pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-background to-transparent\"></div>\n                    <div className=\"pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-background to-transparent\"></div>\n                </div>\n            ) : variant === \"flush-dual\" ? (\n                <div className={cn(\"flex flex-col overflow-hidden border-y border-border bg-background relative\", containerClassName)}>\n                    <MarqueeRow speed={speed} direction=\"left\" className=\"[--gap:0rem] p-0 border-b border-border\">\n                        {itemsToDisplay.slice(0, Math.ceil(itemsToDisplay.length / 2)).map((item, i) => <TestimonialCard key={`fd-row1-${i}`} item={item} variant=\"flush\" />)}\n                    </MarqueeRow>\n                    <MarqueeRow speed={speed} direction=\"right\" className=\"[--gap:0rem] p-0\">\n                        {itemsToDisplay.slice(Math.ceil(itemsToDisplay.length / 2)).map((item, i) => <TestimonialCard key={`fd-row2-${i}`} item={item} variant=\"flush\" />)}\n                    </MarqueeRow>\n                    <div className=\"pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-background to-transparent z-10\"></div>\n                    <div className=\"pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-background to-transparent z-10\"></div>\n                </div>\n            ) : (\n                <div className={cn(\"py-8 overflow-hidden\", cnContainer)}>\n                    <MarqueeRow speed={speed} direction=\"left\">\n                        {itemsToDisplay.map((item, i) => <TestimonialCard key={`default-${i}`} item={item} />)}\n                    </MarqueeRow>\n                </div>\n            )}\n        </React.Fragment>\n    )\n}\n",
      "type": "registry:ui"
    }
  ]
}