61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface MarqueeProps {
|
||
|
|
className?: string;
|
||
|
|
reverse?: boolean;
|
||
|
|
pauseOnHover?: boolean;
|
||
|
|
children?: React.ReactNode;
|
||
|
|
vertical?: boolean;
|
||
|
|
repeat?: number;
|
||
|
|
duration?: string;
|
||
|
|
gap?: string;
|
||
|
|
[key: string]: unknown;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Marquee({
|
||
|
|
className,
|
||
|
|
reverse = false,
|
||
|
|
pauseOnHover = false,
|
||
|
|
children,
|
||
|
|
vertical = false,
|
||
|
|
repeat = 4,
|
||
|
|
gap,
|
||
|
|
|
||
|
|
duration = "40s",
|
||
|
|
...props
|
||
|
|
}: MarqueeProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
{...props}
|
||
|
|
style={{
|
||
|
|
["--duration" as string]: duration,
|
||
|
|
["--gap" as string]: gap, // 👈 dynamic gap applied
|
||
|
|
}}
|
||
|
|
className={cn(
|
||
|
|
"group flex items-center [gap:var(--gap)] overflow-hidden p-2",
|
||
|
|
vertical ? "flex-col" : "flex-row",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{Array.from({ length: repeat }).map((_, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className={cn(
|
||
|
|
"marquee flex shrink-0 justify-around [gap:var(--gap)]",
|
||
|
|
{
|
||
|
|
reverse: reverse, // add reverse direction
|
||
|
|
pause: pauseOnHover, // pause animation on hover
|
||
|
|
"flex-row": !vertical,
|
||
|
|
"flex-col": vertical,
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|