139 lines
4.8 KiB
TypeScript
139 lines
4.8 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import { UnderLine } from "../icons";
|
|
import { Autoplay, Pagination, Navigation, Mousewheel } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/effect-fade";
|
|
import "swiper/css/pagination";
|
|
import Link from "next/link";
|
|
import { getListArticle } from "@/service/article";
|
|
import { Card, CardFooter } from "@nextui-org/react";
|
|
import { convertDateFormat, textEllipsis } from "@/utils/global";
|
|
|
|
export default function SidebarDetail() {
|
|
const [article, setArticle] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
async function getArticle() {
|
|
const req = { page: 1, search: "", limit: "10" };
|
|
|
|
const response = await getListArticle(req);
|
|
setArticle(response?.data?.data);
|
|
}
|
|
getArticle();
|
|
}, []);
|
|
return (
|
|
<div className="mt-2 space-y-5">
|
|
<div className="font-semibold flex flex-col items-center space-y-5">
|
|
<div className="flex flex-col items-center">
|
|
<div>
|
|
Humas <b>MABES POLRI</b>
|
|
</div>
|
|
<div>
|
|
<UnderLine />
|
|
</div>
|
|
</div>
|
|
<div className="w-full lg:w-[300px] h-[400px] lg:p-4">
|
|
<Swiper
|
|
direction={"vertical"}
|
|
centeredSlides={false}
|
|
spaceBetween={10}
|
|
mousewheel={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
modules={[Autoplay, Pagination, Mousewheel]}
|
|
className="mySwiper"
|
|
slidesPerView={2}
|
|
>
|
|
{article?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem.id}>
|
|
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
|
|
<img
|
|
alt="headernews"
|
|
src={
|
|
newsItem?.thumbnailUrl == ""
|
|
? "/no-image.jpg"
|
|
: newsItem?.thumbnailUrl
|
|
}
|
|
className="object-cover !h-[70%] rounded-lg"
|
|
/>
|
|
<div className="text-black dark:text-white flex flex-col">
|
|
<Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
|
|
<p className="text-left font-bold text-sm">
|
|
{textEllipsis(newsItem.title, 30)}
|
|
</p>
|
|
</Link>
|
|
<p className="py-[2px] text-left text-xs">
|
|
{convertDateFormat(newsItem.createdAt)} WIB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
<div className="font-semibold flex flex-col items-center space-y-5">
|
|
<div className="flex flex-col items-center">
|
|
<div>
|
|
Humas <b>POLDA</b>
|
|
</div>
|
|
<div>
|
|
<UnderLine />
|
|
</div>
|
|
</div>
|
|
<div className="w-full lg:w-[300px] h-[500px] lg:h-[400px] lg:p-4">
|
|
<Swiper
|
|
direction={"vertical"}
|
|
centeredSlides={false}
|
|
spaceBetween={10}
|
|
mousewheel={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
modules={[Autoplay, Pagination, Mousewheel]}
|
|
className="mySwiper"
|
|
slidesPerView={2}
|
|
>
|
|
{article?.map((newsItem: any) => (
|
|
<SwiperSlide key={newsItem.id}>
|
|
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
|
|
<img
|
|
alt="headernews"
|
|
src={
|
|
newsItem?.thumbnailUrl == ""
|
|
? "/no-image.jpg"
|
|
: newsItem?.thumbnailUrl
|
|
}
|
|
className="object-cover !h-[70%] rounded-lg"
|
|
/>
|
|
<div className="text-black dark:text-white flex flex-col">
|
|
<Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
|
|
<p className="text-left font-semibold text-xs">
|
|
{textEllipsis(newsItem.title, 40)}
|
|
</p>
|
|
</Link>
|
|
<p className="py-[2px] text-left text-xs">
|
|
{convertDateFormat(newsItem.createdAt)} WIB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|