96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
"use client";
|
|
import { Card, CardFooter } from "@nextui-org/react";
|
|
import Image from "next/image";
|
|
import { useEffect, useState } from "react";
|
|
import { ChevronLeftWhite, ChevronRightIcon, EyeIcon } from "../icons";
|
|
import Link from "next/link";
|
|
import { getListArticle } from "@/service/article";
|
|
import { convertDateFormat } from "@/utils/global";
|
|
import { Autoplay, Pagination, Navigation } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
export default function ENewsPolri() {
|
|
const [article, setArticle] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
const req = { page: 1, search: "", limit: "10" };
|
|
|
|
const response = await getListArticle(req);
|
|
console.log("res", response?.data?.data);
|
|
setArticle(response?.data?.data);
|
|
}
|
|
getArticle();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto flex py-4 flex-col justify-between items-center">
|
|
<p className="text-white font-bold text-2xl underline underline-offset-4 decoration-red-600">
|
|
E-Majalah Polri
|
|
</p>
|
|
|
|
<div className="w-screen lg:w-[90%]">
|
|
<div>
|
|
<Swiper
|
|
centeredSlides={false}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
navigation={true}
|
|
modules={[Autoplay, Pagination, Navigation]}
|
|
className="mySwiper gap-3"
|
|
slidesPerView={1}
|
|
breakpoints={{
|
|
// When the window width is less than 640px
|
|
720: {
|
|
slidesPerView: 3, // Set slidesPerView to 1 on mobile
|
|
},
|
|
}}
|
|
>
|
|
{article?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem.id}>
|
|
<Card isFooterBlurred radius="lg" className="border-none">
|
|
<Image
|
|
alt="headernews"
|
|
className="object-cover"
|
|
height={660}
|
|
src="/headernews.png"
|
|
width={460}
|
|
layout="responsive"
|
|
/>
|
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
|
|
<div className="text-white">
|
|
<Link href={`news/detail/${newsItem.id}`}>
|
|
<p className="text-left font-semibold">
|
|
{newsItem.title}
|
|
</p>
|
|
</Link>
|
|
<p className="py-[2px] text-left text-sm">
|
|
{convertDateFormat(newsItem.createdAt)} WIB
|
|
</p>
|
|
<p className="flex items-center gap-1 text-sm">
|
|
<EyeIcon />
|
|
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
|
|
</p>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
className="flex items-center gap-2 text-[#DD8306]"
|
|
href="/e-majalah-polri/daftar-majalah"
|
|
>
|
|
Lihat Semua <ChevronRightIcon color="[#DD8306]" />
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|