99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|