112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
"use client";
|
|
import { Card, CardBody, CardFooter, Image } from "@heroui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { EyeIcon, UnderLine } from "../icons";
|
|
import { getListArticle } from "@/services/article";
|
|
import { Autoplay, Pagination, Navigation } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/effect-fade";
|
|
import "swiper/css/navigation";
|
|
import Link from "next/link";
|
|
import { convertDateFormat, textEllipsis } from "@/utils/global";
|
|
|
|
export default function RelatedNews(props: { categories: any }) {
|
|
const { categories } = props;
|
|
const [article, setArticle] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
console.log("categories", categories);
|
|
const idString = categories.map((item: any) => item.id).join(",");
|
|
|
|
const req = {
|
|
page: 1,
|
|
search: "",
|
|
limit: "10",
|
|
isPublish: true,
|
|
categoryIds: idString,
|
|
};
|
|
const response = await getListArticle(req);
|
|
setArticle(response?.data?.data);
|
|
}
|
|
getArticle();
|
|
}, []);
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<div className="text-2xl font-bold flex flex-col items-center mb-3">
|
|
<div className="border-b-3 border-red-600 text-lg font-semibold">
|
|
Berita Terkait
|
|
</div>
|
|
</div>
|
|
<div className="w-[90vw] lg:w-full">
|
|
<div>
|
|
<Swiper
|
|
centeredSlides={false}
|
|
spaceBetween={10}
|
|
navigation={true}
|
|
modules={[Autoplay, Navigation]}
|
|
className="mySwiper"
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
// When the window width is less than 640px
|
|
720: {
|
|
slidesPerView: 4, // Set slidesPerView to 1 on mobile
|
|
},
|
|
}}
|
|
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]"
|
|
);
|
|
}}
|
|
>
|
|
{article?.map((newsItem: any, index: number) => (
|
|
<SwiperSlide key={`${newsItem.id}-${index}`}>
|
|
<Card isFooterBlurred radius="lg" className="border-none">
|
|
<Image
|
|
width={480}
|
|
height={480}
|
|
alt="headernews"
|
|
src={
|
|
newsItem?.thumbnailUrl == ""
|
|
? "/no-image.jpg"
|
|
: newsItem?.thumbnailUrl
|
|
}
|
|
className="!h-[25vh] object-cover rounded-none"
|
|
/>
|
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute bottom-1 shadow-small z-10">
|
|
<div className="text-black dark:text-white lg:text-white">
|
|
<Link
|
|
href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
|
|
>
|
|
<p className="text-left font-bold text-sm">
|
|
{textEllipsis(newsItem.title, 33)}
|
|
</p>
|
|
</Link>
|
|
<p className="py-[2px] text-left text-xs">
|
|
{convertDateFormat(newsItem.createdAt)} WIB
|
|
</p>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|