88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
|
|
export const InfiniteMovingCards = ({
|
|
items,
|
|
direction = "left",
|
|
speed = "fast",
|
|
pauseOnHover = true,
|
|
className,
|
|
}: {
|
|
items: React.ReactNode[];
|
|
direction?: "left" | "right";
|
|
speed?: "fast" | "normal" | "slow";
|
|
pauseOnHover?: boolean;
|
|
className?: string;
|
|
}): JSX.Element => {
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
const scrollerRef = React.useRef<HTMLUListElement>(null);
|
|
const [start, setStart] = useState(false);
|
|
|
|
const getDirection = useCallback(() => {
|
|
if (containerRef.current) {
|
|
if (direction === "left") {
|
|
containerRef.current.style.setProperty("--animation-direction", "forwards");
|
|
} else {
|
|
containerRef.current.style.setProperty("--animation-direction", "reverse");
|
|
}
|
|
}
|
|
}, [direction]);
|
|
|
|
const getSpeed = useCallback(() => {
|
|
if (containerRef.current) {
|
|
if (speed === "fast") {
|
|
containerRef.current.style.setProperty("--animation-duration", "20s");
|
|
} else if (speed === "normal") {
|
|
containerRef.current.style.setProperty("--animation-duration", "40s");
|
|
} else {
|
|
containerRef.current.style.setProperty("--animation-duration", "80s");
|
|
}
|
|
}
|
|
}, [speed]);
|
|
|
|
const addAnimation = useCallback(() => {
|
|
if (containerRef.current && scrollerRef.current) {
|
|
const scrollerContent = Array.from(scrollerRef.current.children);
|
|
|
|
scrollerContent.forEach((item) => {
|
|
const duplicatedItem = item.cloneNode(true);
|
|
if (scrollerRef.current) {
|
|
scrollerRef.current.appendChild(duplicatedItem);
|
|
}
|
|
});
|
|
|
|
getDirection();
|
|
getSpeed();
|
|
setStart(true);
|
|
}
|
|
}, [getDirection, getSpeed]);
|
|
|
|
useEffect(() => {
|
|
addAnimation();
|
|
}, [addAnimation]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className={cn("scroller relative z-20 overflow-hidden", className)}
|
|
>
|
|
<ul
|
|
ref={scrollerRef}
|
|
className={cn(
|
|
"flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
|
|
start && "animate-scroll",
|
|
pauseOnHover && "hover:[animation-play-state:paused]",
|
|
)}
|
|
>
|
|
{items.map((item, idx) => (
|
|
<li className="relative flex-shrink-0" key={idx}>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|