xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
51 lines (50 loc) • 3.31 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../lib/utils.js';
import React, { useEffect, useState } from "react";
export const InfiniteMovingCards = ({ items, direction = "left", speed = "fast", pauseOnHover = true, className, }) => {
const containerRef = React.useRef(null);
const scrollerRef = React.useRef(null);
useEffect(() => {
addAnimation();
}, []);
const [start, setStart] = useState(false);
function addAnimation() {
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);
}
}
const getDirection = () => {
if (containerRef.current) {
if (direction === "left") {
containerRef.current.style.setProperty("--animation-direction", "forwards");
}
else {
containerRef.current.style.setProperty("--animation-direction", "reverse");
}
}
};
const getSpeed = () => {
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");
}
}
};
return (_jsx("div", { ref: containerRef, className: cn("scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]", className), children: _jsx("ul", { ref: scrollerRef, className: cn("flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4", start && "animate-scroll", pauseOnHover && "hover:[animation-play-state:paused]"), children: items.map((item, idx) => (_jsx("li", { className: "relative w-[350px] max-w-full shrink-0 rounded-2xl border border-b-0 border-zinc-200 bg-[linear-gradient(180deg,#fafafa,#f5f5f5)] px-8 py-6 md:w-[450px] dark:border-zinc-700 dark:bg-[linear-gradient(180deg,#27272a,#18181b)]", children: _jsxs("blockquote", { children: [_jsx("div", { "aria-hidden": "true", className: "user-select-none pointer-events-none absolute -top-0.5 -left-0.5 -z-1 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]" }), _jsx("span", { className: "relative z-20 text-sm leading-[1.6] font-normal text-neutral-800 dark:text-gray-100", children: item.quote }), _jsx("div", { className: "relative z-20 mt-6 flex flex-row items-center", children: _jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm leading-[1.6] font-normal text-neutral-500 dark:text-gray-400", children: item.name }), _jsx("span", { className: "text-sm leading-[1.6] font-normal text-neutral-500 dark:text-gray-400", children: item.title })] }) })] }) }, item.name))) }) }));
};