web-humas-fe/components/landing/adds-carousel.tsx

"use client";

import Image from "next/image";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  ScrollShadow,
} from "@heroui/react";
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import Link from "next/link";
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
import { useEffect, useState } from "react";
import { getAdvertise } from "@/service/advertisement";

const datas = [
  { id: 1, src: "/sample-banner.png" },
  { id: 2, src: "/sample-banner-2.png" },
  { id: 2, src: "/sample-banner-3.jpg" },
];

interface Jumbotron {
  id: number;
  title: string;
  description: string;
  redirectLink: string;
}

export default function AddsCarousel() {
  const [jumbotronList, setJumbotronList] = useState<Jumbotron[]>([]);

  useEffect(() => {
    initFetch();
  }, []);

  const initFetch = async () => {
    const req = { page: 1, limit: 5, placement: "banner" };
    const res = await getAdvertise(req);
    setJumbotronList(res?.data?.data);
  };
  return (
    <div className="w-[90%] lg:w-[75%] mx-auto">
      {jumbotronList ? (
        <Swiper
          centeredSlides={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          navigation={true}
          modules={[Autoplay, Controller, Navigation]}
          className="mySwiper"
          onSwiper={(swiper) => {
            swiper.navigation.nextEl?.classList.add(
              "bg-white/70",
              "!text-black",
              "rounded-full",
              "!w-[40px]",
              "!h-[40px]"
            );
            swiper.navigation.prevEl?.classList.add(
              "bg-white/70",
              "!text-black",
              "rounded-full",
              "!w-[40px]",
              "!h-[40px]"
            );
          }}
        >
          {jumbotronList?.map((newsItem, index) => (
            <SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
              <Card
                isFooterBlurred
                radius="lg"
                className="border-none h-[20vh] lg:h-[50vh] shadow-none"
              >
                <Image
                  alt="headernews"
                  width={1440}
                  height={1080}
                  className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
                  // src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
                  src={datas[index % 3].src}
                />
              </Card>
            </SwiperSlide>
          ))}
        </Swiper>
      ) : (
        <CircularProgress aria-label="Loading..." size="lg" />
      )}
    </div>
  );
}