105 lines
3.0 KiB
JavaScript
105 lines
3.0 KiB
JavaScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
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);
|
|
const [start, setStart] = useState(false);
|
|
|
|
useEffect(() => {
|
|
addAnimation();
|
|
}, []);
|
|
|
|
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) {
|
|
containerRef.current.style.setProperty(
|
|
"--animation-direction",
|
|
direction === "left" ? "forwards" : "reverse"
|
|
);
|
|
}
|
|
};
|
|
|
|
const getSpeed = () => {
|
|
if (containerRef.current) {
|
|
const duration =
|
|
speed === "fast" ? "20s" : speed === "normal" ? "40s" : "80s";
|
|
containerRef.current.style.setProperty("--animation-duration", duration);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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
|
|
)}
|
|
>
|
|
<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]"
|
|
)}
|
|
>
|
|
{items.map((item) => (
|
|
<li
|
|
key={item.name}
|
|
className="relative w-[350px] max-w-full shrink-0 rounded-2xl border border-b-0 border-zinc-200 px-8 py-6 md:w-[450px] dark:border-zinc-700"
|
|
style={{
|
|
background:
|
|
"linear-gradient(103.4deg, #04071D 16.66%, #0C0E23 81.61%)",
|
|
}}
|
|
>
|
|
<blockquote>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute -top-0.5 -left-0.5 -z-1 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)] user-select-none"
|
|
></div>
|
|
<span className="relative z-20 text-sm leading-[1.6] font-normal text-white">
|
|
{item.quote}
|
|
</span>
|
|
<div className="relative z-20 mt-6 flex flex-row items-center">
|
|
<span className="flex flex-col gap-1">
|
|
<span className="text-sm leading-[1.6] font-normal text-white/70">
|
|
{item.name}
|
|
</span>
|
|
<span className="text-sm leading-[1.6] font-normal text-white/70">
|
|
{item.title}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</blockquote>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|