web-humas-fe/components/page/sidebar-detail.tsx

"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 "@/services/article";
import { Card, CardFooter, Skeleton } from "@heroui/react";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import Image from "next/image";

export default function SidebarDetail() {
  const [articleMabes, setArticleMabes] = useState<any>([]);
  const [articlePolda, setArticlePolda] = useState<any>([]);

  useEffect(() => {
    getArticleMabes();
    getArticlePolda();
  }, []);

  async function getArticleMabes() {
    const req = {
      page: 1,
      search: "",
      limit: "10",
      isPublish: true,
      category: "781,802",
    };

    const response = await getListArticle(req);
    setArticleMabes(response?.data?.data);
  }

  async function getArticlePolda() {
    const req = {
      page: 1,
      search: "",
      limit: "10",
      isPublish: true,
      isPolda: true,
    };

    const response = await getListArticle(req);
    setArticlePolda(response?.data?.data);
  }

  return (
    <div className="mt-2 space-y-5">
      <div className="font-semibold flex flex-col items-center py-3 rounded-lg">
        <div className="flex  flex-col items-center">
          <div className="border-b-2 border-red-600 font-base text-lg">
            Humas <span className="font-bold">MABES POLRI</span>
          </div>
        </div>
        <div className="w-full mt-3">
          {articleMabes?.length < 1 ? (
            <Skeleton className="rounded-lg">
              <div className="h-[320px] rounded-lg bg-default-300" />
            </Skeleton>
          ) : (
            <Swiper
              centeredSlides={false}
              spaceBetween={10}
              mousewheel={true}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false,
              }}
              pagination={{
                clickable: true,
              }}
              modules={[Autoplay, Pagination, Mousewheel]}
              className="mySwiper"
              slidesPerView={1}
            >
              {articleMabes?.map((newsItem: any) => (
                <SwiperSlide key={newsItem.id}>
                  <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
                    <Image
                      width={480}
                      height={480}
                      alt="headernews"
                      src={
                        newsItem?.thumbnailUrl == ""
                          ? "/no-image.jpg"
                          : newsItem?.thumbnailUrl
                      }
                      className="object-cover !h-[200px] 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, 45)}
                        </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 className="border-b-2 border-red-600 font-base text-lg">
            Humas <span className="font-bold">POLDA</span>
          </div>
        </div>
        <div className="w-full mt-3">
          {articlePolda?.length < 1 ? (
            <Skeleton className="rounded-lg">
              <div className="h-[320px] rounded-lg bg-default-300" />
            </Skeleton>
          ) : (
            <Swiper
              centeredSlides={false}
              spaceBetween={10}
              mousewheel={true}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false,
              }}
              pagination={{
                clickable: true,
              }}
              modules={[Autoplay, Pagination, Mousewheel]}
              className="mySwiper"
              slidesPerView={1}
            >
              {articlePolda?.map((newsItem: any) => (
                <SwiperSlide key={newsItem.id}>
                  <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
                    <Image
                      width={480}
                      height={480}
                      alt="headernews"
                      src={
                        newsItem?.thumbnailUrl == ""
                          ? "/no-image.jpg"
                          : newsItem?.thumbnailUrl
                      }
                      className="object-cover !h-[200px] 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, 45)}
                        </p>
                      </Link>
                      <p className="py-[2px] text-left text-xs">
                        {convertDateFormat(newsItem.createdAt)} WIB
                      </p>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          )}
        </div>
      </div>
    </div>
  );
}