100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
// Thank you: https://ui.aceternity.com/components/infinite-moving-cards
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
export const InfiniteMovingCards = <T,>({
|
|
items,
|
|
direction = 'left',
|
|
speed = 'fast',
|
|
pauseOnHover = true,
|
|
className,
|
|
renderItem,
|
|
}: {
|
|
items: T[];
|
|
renderItem: (item: T, index: number) => React.ReactNode;
|
|
direction?: 'left' | 'right';
|
|
speed?: 'fast' | 'normal' | 'slow';
|
|
pauseOnHover?: boolean;
|
|
className?: string;
|
|
}) => {
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
const scrollerRef = React.useRef<HTMLUListElement>(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 (
|
|
<div
|
|
ref={containerRef}
|
|
className={cn(
|
|
'scroller relative z-20 overflow-hidden -ml-4 md:-ml-[1200px] w-screen md:w-[calc(100vw+1400px)]',
|
|
className,
|
|
)}
|
|
>
|
|
<ul
|
|
ref={scrollerRef}
|
|
className={cn(
|
|
'flex min-w-full shrink-0 gap-8 py-4 w-max flex-nowrap items-start',
|
|
start && 'animate-scroll',
|
|
pauseOnHover && 'hover:[animation-play-state:paused]',
|
|
)}
|
|
>
|
|
{items.map((item, idx) => (
|
|
<li
|
|
className="w-[310px] max-w-full relative shrink-0 md:w-[400px]"
|
|
key={idx.toString()}
|
|
>
|
|
{renderItem(item, idx)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|