export default function Carousel()

in website/src/components/Carousel/Carousel.js [42:80]
31 lines of code
3 McCabe index (conditional complexity)

export default function Carousel() {
  const [slideIndex, setSlideIndex] = useState(0)

  const SLIDE_NUM = DATA_SLIDES.length

  // Classname follows this template carousel_slide_{}_{}
  const OffsetX_Classname = `carousel_slide_${slideIndex + 1}_${SLIDE_NUM}`

  const nextSlide = () => {
    if (DATA_SLIDES.length !== slideIndex + 1) {
      setSlideIndex(slideIndex => slideIndex + 1)
    }
  }

  const prevSlide = () => {
    if (slideIndex !== 0) {
      setSlideIndex(slideIndex => slideIndex - 1)
    }
  }

  return (
    <div className="relative h-[270px] w-screen md:h-[600px] xl:h-[750px]">
      <div className="absolute bottom-1/2 z-50 flex w-full translate-y-1/2 transform justify-between px-4">
        <ButtonNav direction="left" onClick={prevSlide} isShow={slideIndex !== 0} tabIndex="0" ariaLabel="left button" />
        <ButtonNav direction="right" onClick={nextSlide} isShow={slideIndex !== SLIDE_NUM - 1} tabIndex="0" ariaLabel="right button" />
      </div>

      <div className="absolute -bottom-12 left-1/2 z-50 flex -translate-x-1/2 transform gap-1 md:bottom-3">
        <CarouselDots number={SLIDE_NUM} currentIndex={slideIndex} />
      </div>

      <div className={`${OffsetX_Classname} flex w-[calc(100%*4)] duration-500 ease-in-out`}>
        {DATA_SLIDES.map(slide => (
          <CarouselSlide title={slide.title} description={slide.description} imageSrc={slide.img} key={slide.id} />
        ))}
      </div>
    </div>
  )
}