Partners.tsx

import { graphql, useStaticQuery } from "gatsby";
import React, { useState, useEffect } from "react";

interface Props {
  className?: string;
  delay?: number;
}

const Partners = (props: Props) => {
  const { className = "", delay } = props;
  const [index, setIndex] = useState(1);

  const dataDirectus = useStaticQuery(graphql`
    query myQuery {
      directus {
        partners {
          id
          logo {
            id
          }
          name
          url
        }
      }
    }
  `);  
  const partners = dataDirectus.directus.partners; 

  const images = partners.filter((item) => item.id);
  const nbr_image: number = images.length;

  const updateIndex = (newIndex: number) => {
    if (newIndex < 0) {
      newIndex = nbr_image - 1;
    } else if (newIndex >= nbr_image) {
      newIndex = 0;
    }

    setIndex(newIndex);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      if (delay != 0) {
        updateIndex(index + 1);
      }
    }, delay);

    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  });

  return (
    <div className={`block relative ${className}`}>
      <div className={`carousel w-1/4 ml-10`}>
        <div
          className={`whitespace-nowrap w-1/2`}
          style={{
            transform:
              nbr_image > 2 ? `translateX(-${index * 60}%)` : `translateX(0)`,
          }}
        >
          {partners.map((partner: any) => (
            <div
              className={`carousel-item relative w-full inline-block`}
              key={partner.id}
            >
              <img src={partner.logo} className="w-full h-[80px]" />
            </div>
          ))}
        </div>
      </div>
      <div className={`absolute flex justify-between pl-5 pr-5 w-[32.4%] top-5`}>
        <button
          onClick={() => updateIndex(index - 1)}
          className={`bg-neutral rounded-3xl w-5 h-10 text-base-100`}
        >
          ❮
        </button>
        <button
          onClick={() => updateIndex(index + 1)}
          className={`bg-neutral rounded-3xl w-5 h-10 text-base-100`}
        >
          ❯
        </button>
      </div>
    </div>
  );
};

export default Partners;