prettier extremly load my cpu and show infinity saving file with 'prettier code formatter' #3217
Description
You asked me about some additionl info - I got this here it is
"use client"
import Image from "next/image"
import { useState } from "react"
import { Carousel } from "react-responsive-carousel"
import "react-responsive-carousel/lib/styles/carousel.min.css"
import { AiFillCaretRight, AiFillCaretLeft } from "react-icons/ai"
import { twMerge } from "tailwind-merge"
interface SliderProps {
images: string[]
title: string
className?: string
containerClassName?: string
}
export function Slider({ images, title, className = "", containerClassName = "" }: SliderProps) {
const [currentIndex, setCurrentIndex] = useState(0)
const [isMoving, setIsMoving] = useState(false)
const [direction, setDirection] = useState("")
const goToPreviousSlide = () => {
if (!isMoving) {
setIsMoving(true)
setDirection("left")
setTimeout(() => {
setCurrentIndex(prev => (prev === 0 ? images.length - 1 : prev - 1))
setIsMoving(false)
}, 300)
}
}
const goToNextSlide = () => {
if (!isMoving) {
setIsMoving(true)
setDirection("right")
setTimeout(() => {
setCurrentIndex(prev => (prev === images.length - 1 ? 0 : prev + 1))
setIsMoving(false)
}, 300)
}
}
return (
<figure className={twMerge(`relative w-full laptop:w-fit ${containerClassName}`)}>
<Carousel
showArrows={true}
showIndicators={false}
showStatus={false}
showThumbs={false}
width={480}
ariaLabel="ariaLabelTest"
axis="horizontal"
emulateTouch={true}
dynamicHeight={true}
renderArrowNext={() => (
<button className="absolute z-[88] top-0 bottom-0 left-0 w-[40px] bg-[rgba(0,0,0,0.4)] flex justify-center items-center"/>
)}>
{images.map((image, index) => (
<Image
className="w-[720px] h-[300px] object-cover"
src={image}
alt="image"
width={360}
height={180}
key={index}
/>
))}
</Carousel>
{/* <button
aria-label="next slide / item"
className="absolute z-[88] top-0 bottom-0 left-0 w-[40px] bg-[rgba(0,0,0,0.4)] flex justify-center items-center"
onClick={goToPreviousSlide}>
<AiFillCaretLeft className="h-6 w-6 text-white" />
</button>
<button
aria-label="next slide / item"
className="absolute z-[88] top-0 bottom-0 right-0 w-[40px] bg-[rgba(0,0,0,0.4)] flex justify-center items-center"
onClick={goToNextSlide}>
<AiFillCaretRight className="h-6 w-6 text-white" />
</button> */}
</figure>
)
}I got this modifying this line
renderArrowNext={() => (
<button className="absolute z-[88] top-0 bottom-0 left-0 w-[40px] bg-[rgba(0,0,0,0.4)] flex justify-center items-center"/>
)}>just make this button as self-closing tag and just like normal button