Carousel.tsx

import React, { useEffect, useState } from "react"
import Image from "./Image"
interface DataImage {
    src: string
}

interface Props {
    images: Array<DataImage>
    isLogo: boolean
    delay?: number
    fullSize?: boolean
}

const Carousel = (props: Props) => {
    const { images, isLogo, delay, fullSize } = props
    const [index, setIndex] = useState(1)

    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 ${
                isLogo
                    ? "flex items-center w-1/2 box-content float-none"
                    : "flex items-center"
            }`}
        >
            <div className="btn-carousel">
                <button
                    onClick={() => updateIndex(index - 1)}
                    className={`bg-neutral rounded-3xl  ${
                        isLogo ? "w-5" : "w-10 absolute z-10 left-2"
                    } h-10 text-base-100`}
                >
                    ❮
                </button>
            </div>
            <div
                className={`inline-block align-middle carousel ${
                    isLogo ? "w-1/2 ml-2 mr-2" : "w-full"
                } truncate`}
            >
                <div
                    className={`whitespace-nowrap ${
                        isLogo ? (fullSize ? "w-full" : "w-4/12") : "w-full"
                    } `}
                    style={{
                        transform: isLogo
                            ? nbr_image > 2
                                ? fullSize
                                    ? `translateX(-${index * 100}%)`
                                    : `translateX(-${index * 60}%)`
                                : `translateX(0)`
                            : `translateX(-${index * 100}%)`,
                        transition: "transform 0.3s",
                    }}
                >
                    {images.map((item: any, key: any) => {
                        return (
                            <div
                                className={`carousel-item relative w-full inline-block ${
                                    isLogo
                                        ? fullSize
                                            ? "mr-0"
                                            : "mr-5"
                                        : "mr-0"
                                }`}
                                key={key}
                            >
                                {isLogo ? (
                                    <div
                                        className={`flex justify-center items-center ${
                                            fullSize ? "w-full" : "w-full h-28"
                                        } `}
                                    >
                                        <Image
                                            image={item.src}
                                            className="w-full border border-gray-600"
                                        />
                                    </div>
                                ) : (
                                    <Image
                                        image={item.src}
                                        className="w-full"
                                    />
                                )}
                            </div>
                        )
                    })}
                </div>
            </div>
            <div className="btn-carousel">
                <button
                    onClick={() => updateIndex(index + 1)}
                    className={`bg-neutral rounded-3xl  ${
                        isLogo ? "w-5" : "w-10 absolute z-10 right-2"
                    } h-10 text-base-100`}
                >
                    ❯
                </button>
            </div>
        </div>
    )
}

export default Carousel