Logos Carousel

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export interface LogosCarouselProps {
7  children: React.ReactNode;
8  stagger?: number;
9  count?: number;
10  className?: string;
11  duration?: number;
12  interval?: number;
13  initialDelay?: number;
14}
15 
16export function LogosCarousel({
17  children,
18  stagger = 0.14,
19  count,
20  className,
21  duration = 600,
22  interval = 2500,
23  initialDelay = 500,
24}: LogosCarouselProps) {
25  const [index, setIndex] = React.useState(0);
26  const [animate, setAnimate] = React.useState(false);
27  const [nextIndex, setNextIndex] = React.useState(1);
28 
29  const childrenArray = React.Children.toArray(children);
30  const logosPerGroup = count || childrenArray.length;
31  const groups: React.ReactNode[][] = [];
32 
33  for (let i = 0; i < childrenArray.length; i += logosPerGroup) {
34    groups.push(childrenArray.slice(i, i + logosPerGroup));
35  }
36 
37  const groupsLength = groups.length;
38 
39  React.useEffect(() => {
40    const id = setTimeout(() => {
41      setAnimate(true);
42    }, initialDelay);
43 
44    return () => {
45      clearTimeout(id);
46    };
47  }, [initialDelay]);
48 
49  React.useEffect(() => {
50    if (!animate || groupsLength === 0) {
51      return;
52    }
53 
54    function loop() {
55      setIndex((prevIndex) => {
56        const newIndex = (prevIndex + 1) % groupsLength;
57        setNextIndex((newIndex + 1) % groupsLength);
58        return newIndex;
59      });
60    }
61 
62    const intervalId = setInterval(loop, interval);
63 
64    return () => {
65      clearInterval(intervalId);
66    };
67  }, [animate, interval, groupsLength]);
68 
69  if (groupsLength === 0) {
70    return null;
71  }
72 
73  return (
74    <>
75      <style jsx>{`
76        @keyframes logos-enter {
77          0% {
78            transform: translateY(40px);
79            filter: blur(4px);
80            opacity: 0;
81          }
82          100% {
83            transform: translateY(0);
84            filter: blur(0px);
85            opacity: 1;
86          }
87        }
88 
89        @keyframes logos-exit {
90          0% {
91            transform: translateY(0);
92            filter: blur(0px);
93            opacity: 1;
94          }
95          100% {
96            transform: translateY(-40px);
97            filter: blur(4px);
98            opacity: 0;
99          }
100        }
101      `}</style>
102      <div
103        className="max-w-[720px] grid place-items-center w-full"
104      >
105        {groups.map((group, groupIndex) => {
106          const isCurrent = groupIndex === index;
107          const isNext = groupIndex === nextIndex && animate;
108// … truncated