OwlCyberSecurity - MANAGER

Edit File: BannerHome.tsx

"use client";
// import { BannerData } from "@/components/BannerData";
import { slidersDataType } from "@/typing";
// import Image from "next/image";
import Link from "next/link";
import React from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/bannerCarousel";
import useDetectMobile from "./components/hooks/DetectMobile";
import Image from "next/image";
import Autoplay from "embla-carousel-autoplay";

interface pageProps {
  sliders: slidersDataType[];
}

function BannerHome({ sliders }: pageProps) {
  const isMobile = useDetectMobile();
  const plugin = React.useRef(
    Autoplay({ delay: 3500, stopOnInteraction: true })
  );
  return (
    <div className="relative md:max-w-[92vw] m-auto md:rounded-b-3xl">
      <div className="absolute w-full z-20 md:rounded-b-3xl" />
      <Carousel
        opts={{
          align: "start",
          loop: true,
        }}
        plugins={[plugin.current]}
        className="ltr md:rounded-b-3xl"
      >
        <CarouselContent className="w-full sm:ml-0 md:rounded-b-3xl">
          {sliders.map((item, index) => (
            <CarouselItem key={index} className="w-full basis-[100%] p-0">
              {item.target ? (
                <a
                  className="h-full block"
                  key={item.id}
                  target="_blank"
                  href={item.link}
                >
                  <img
                    className="md:rounded-b-3xl"
                    width={2880}
                    height={946}
                    src={item.path}
                    alt={item.title}
                    // priority={index <= 1 ? true : false}
                    // loading={index <= 1 ? "eager" : "lazy"}
                  />
                </a>
              ) : (
                <Link className="h-full block" key={item.id} href={item.link}>
                  <img
                    className="md:rounded-b-3xl"
                    width={2880}
                    height={946}
                    src={item.path}
                    alt={item.title}
                    // priority={index <= 1 ? true : false}
                    // loading={index <= 1 ? "eager" : "lazy"}
                  />
                </Link>
              )}
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="hidden md:flex" />
        <CarouselNext className="hidden md:flex" />
      </Carousel>
    </div>
  );
}

export default BannerHome;