Custom Arrow Slider - Copy this React, Tailwind Component to your project

Change the arrows to use left right angles, the disabled color should be textgrey and the active should primary: "use client"; import Image from "next/image"; import Ellipse from "/public/images/offers/Eliipse.png"; import OfferCard from "../OfferCards/OfferCard"; import Slider from "react slick"; import { useEffect, useState } from "react"; import axios from "axios"; import { Skeleton } from "@mui/material"; export default function Offers() { const [offers, setOffers] = useState([]); const fetchOffers = async () => { console.log("fetchOffers Offers.js"); try { const offersResponse = await axios.get( `${process.env.NEXT_PUBLIC_API_KEY}/offer` ); const data = offersResponse.data; setOffers(data); } catch (e) { console.log("error while fetching offers", e); } }; useEffect(() => { // Wait a short delay to ensure slider is initialized const arrowSetup = setTimeout(() => { const nextArrow = document.querySelector(".slick next"); const prevArrow = document.querySelector(".slick prev"); if (nextArrow && prevArrow) { const handleNextClick = function () { this.classList.add("clicked"); prevArrow.classList.remove("clicked"); }; const handlePrevClick = function () { this.classList.add("clicked"); nextArrow.classList.remove("clicked"); }; // Set initial state next arrow active by default nextArrow.classList.add("clicked"); nextArrow.addEventListener("click", handleNextClick); prevArrow.addEventListener("click", handlePrevClick); // Cleanup function to remove event listeners return () => { nextArrow.removeEventListener("click", handleNextClick); prevArrow.removeEventListener("click", handlePrevClick); clearTimeout(arrowSetup); }; } }, 500); // Delay to ensure DOM elements are ready fetchOffers(); // Return cleanup function for the timeout return () => clearTimeout(arrowSetup); }, []); const settings = { dots: false, infinite: true, speed: 1000, autoplay: true, autoplaySpeed: 2000, variableWidth: true, slidesToScroll: 2, rows: 1, responsive: [ { breakpoint: 1150, settings: { slidesToScroll: 1, }, }, { breakpoint: 590, settings: { slidesToScroll: 1, slidesToShow: 1, }, }, ], }; return ( <div className=" bg secondary"> <div className="flex justify between "> <div className="m auto pb 0 lg:pl 64"> <p className=" text center text 2xl xl:text 4xl font bold pb 3 " > Our Most Popular Offers </p> <div className=" m auto border primary border b 4 w 20 h 1 pb 2 " ></div> </div> <div className="lg:block xl:block 2xl:block 3xl:block hidden 3xl: mt 20"> <Image src={Ellipse} alt="ellipse" width={300} height={300} /> </div> </div> <div className="xl:ms 16 xl:pb 24 4xl:px 32 4xxl:px 56 5xl:px 76 6xl:px 96 7xl:px 105 xl:px 14 2xl:px 24 px 4 3xl:px 40 lg:px 16 4xl:justify center pb 24 2xl: mt 16 mt 7 lg: mt 20 md:ms 10" > <Slider className="offers_slider" {...settings}> {offers?.data?.data?.length > 0 ? ( offers?.data?.data?.map((o) => { const format = o?.attributes?.Cover?.data?.attributes?.formats?.small !== undefined ? o?.attributes?.Cover?.data?.attributes?.formats?.small?.url : o?.attributes?.Cover?.data?.attributes?.formats?.thumbnail ?.url; const logo = o?.attributes?.Restaurant?.data?.attributes?.Logo?.data; const restaurant_name = o?.attributes?.Restaurant?.data?.attributes?.Name; const coloredText = o?.attributes?.Title?.includes("Buy 1 Get 1 Free") && "Buy 1 Get 1 Free"; const cardText = o?.attributes?.Title?.replace( /Buy 1 Get 1 Free/g, "" ); return ( <div key={o.id} className="pr 4"> <OfferCard img={`${format}`} altText="sherton1" icon={logo} width={194} height={64} restaurantName={restaurant_name} cardText={cardText} slug={o?.attributes?.slug} coloredText={coloredText} /> </div> ); }) ) : ( <Skeleton animation="wave" /> )} </Slider> </div> </div> ); }