infinite-moving-cards

1"use client";
2 
3import { cn } from "@/lib/utils";
4import React, { useEffect, useState } from "react";
5 
6export interface InfiniteMovingCardsProps {
7    items: {
8        quote: string;
9        name: string;
10        title: string;
11    }[];
12    direction?: "left" | "right";
13    speed?: "fast" | "normal" | "slow";
14    pauseOnHover?: boolean;
15    className?: string;
16}
17 
18export const InfiniteMovingCards = ({
19    items,
20    direction = "left",
21    speed = "fast",
22    pauseOnHover = true,
23    className,
24}: InfiniteMovingCardsProps) => {
25    const containerRef = React.useRef<HTMLDivElement>(null);
26    const scrollerRef = React.useRef<HTMLUListElement>(null);
27 
28    useEffect(() => {
29        addAnimation();
30    }, []);
31    const [start, setStart] = useState(false);
32    function addAnimation() {
33        if (containerRef.current && scrollerRef.current) {
34            const scrollerContent = Array.from(scrollerRef.current.children);
35 
36            scrollerContent.forEach((item) => {
37                const duplicatedItem = item.cloneNode(true);
38                if (scrollerRef.current) {
39                    scrollerRef.current.appendChild(duplicatedItem);
40                }
41            });
42 
43            getDirection();
44            getSpeed();
45            setStart(true);
46        }
47    }
48    const getDirection = () => {
49        if (containerRef.current) {
50            if (direction === "left") {
51                containerRef.current.style.setProperty(
52                    "--animation-direction",
53                    "forwards"
54                );
55            } else {
56                containerRef.current.style.setProperty(
57                    "--animation-direction",
58                    "reverse"
59                );
60            }
61        }
62    };
63    const getSpeed = () => {
64        if (containerRef.current) {
65            if (speed === "fast") {
66                containerRef.current.style.setProperty("--animation-duration", "20s");
67            } else if (speed === "normal") {
68                containerRef.current.style.setProperty("--animation-duration", "40s");
69            } else {
70                containerRef.current.style.setProperty("--animation-duration", "80s");
71            }
72        }
73    };
74    return (
75        <div
76            ref={containerRef}
77            className={cn(
78                "scroller relative z-20 max-w-7xl overflow-hidden ",
79                className
80            )}
81        >
82            <ul
83                ref={scrollerRef}
84                className={cn(
85// … truncated