web-humas-fe/components/landing/HeaderNews.tsx

"use client";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  ScrollShadow,
} from "@heroui/react";
import Image from "next/image";
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";

import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import { useTranslations } from "next-intl";
import { data } from "autoprefixer";
import { Controller as FormController } from "react-hook-form";
import { Nabla } from "next/font/google";

export default function HeaderNews() {
  const [article, setArticle] = useState<any>([]);
  const t = useTranslations("Landing");
  const [selectedTab, setSelectedTab] = useState("media");
  const [hotNews, setHotNews] = useState<any>([]);

  // useEffect(() => {

  // }, []);

  useEffect(() => {
    getArticle();

    getHotNews();
  }, []);

  async function getArticle() {
    const req = {
      page: 1,
      search: "",
      limit: "10",
      sort: "desc",
    };
    const response = await getListArticle(req);
    setArticle(response?.data?.data);
  }

  async function getHotNews() {
    const req = {
      page: 1,
      search: "",
      limit: "10",
      sortBy: "view_count",
      sort: "desc",
      isPublish: true,
    };
    const response = await getListArticle(req);
    setHotNews(response?.data?.data);
  }

  return (
    <div className="w-full">
      <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black  p-1 lg:p-8 lg:h-[55vh] w-[75%] lg:mx-auto">
        <div className="lg:hidden w-full h-full">
          {article ? (
            <Swiper
              centeredSlides={true}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false,
              }}
              navigation={true}
              className="mySwiper"
              modules={[Autoplay, Controller, Navigation]}
              onSwiper={(swiper) => {
                swiper.navigation.nextEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[24px]",
                  "!h-[24px]"
                );
                swiper.navigation.prevEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[24px]",
                  "!h-[24px]"
                );
              }}
            >
              {article?.map((newsItem: any, index: number) => (
                <SwiperSlide key={newsItem?.id}>
                  <Card isFooterBlurred radius="lg" className="border-none">
                    {/* <Image
                      width={1920}
                      height={1080}
                      alt="headernews"
                      src={
                        newsItem?.thumbnailUrl == ""
                          ? "/no-image.jpg"
                          : newsItem?.thumbnailUrl
                      }
                      className="h-[25vh] object-cover"
                    /> */}

                    <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-black dark:text-white">
                        <Link
                          href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                        >
                          <p className="text-left font-semibold">
                            {textEllipsis(newsItem.title, 40)}
                          </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 className="text-black dark:text-white" />
                          {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                        </p>
                      </div>
                    </CardFooter>
                  </Card>
                </SwiperSlide>
              ))}
            </Swiper>
          ) : (
            <CircularProgress aria-label="Loading..." size="lg" />
          )}
        </div>
        <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[37vh] lg:h-[50vh]">
          <p className="text-base font-bold text-center dark:text-white text-black">
            {t("berita")}
          </p>
          <ScrollShadow hideScrollBar className="h-[33vh] lg:h-[39vh] ">
            {hotNews?.map((data: any, index: number) => (
              <div
                className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
                key={data?.id}
              >
                {/* <Image
                  height={480}
                  width={480}
                  alt="headernews"
                  src={
                    data?.thumbnailUrl == ""
                      ? "/no-image.jpg"
                      : data?.thumbnailUrl
                  }
                  className="object-cover w-[60px] h-[60px] rounded-md"
                /> */}
                <div>
                  <Link
                    href={`/news/detail/${data?.id}-${data?.slug}`}
                    className="lg:hidden"
                  >
                    {textEllipsis(data.title, 40)}
                  </Link>
                  <Link
                    href={`/news/detail/${data?.id}-${data?.slug}`}
                    key={data?.id}
                    className="hidden lg:block"
                  >
                    {textEllipsis(data.title, 66)}
                  </Link>
                  <div className="flex flex-row gap-2 text-[10px]">
                    <p className="py-[2px]">
                      {convertDateFormat(data.createdAt)} WIB
                    </p>
                    <p className="flex items-center gap-1">
                      <EyeIcon size={14} />
                      {data.viewCount === null ? 0 : data.viewCount}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </ScrollShadow>
          <div className="m-2">
            <Link href="/news/all">
              <Button
                className="w-full bg-gradient-to-r from-red-700  to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
                radius="none"
              >
                {t("semua")}
              </Button>
            </Link>
          </div>
        </div>

        <div className="hidden lg:block w-full lg:w-[50%] h-[50vh]">
          {article ? (
            <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]"
                );
              }}
            >
              {article?.map((newsItem: any, index: number) => (
                <SwiperSlide key={newsItem?.id} className="h-[50vh]">
                  <Card
                    isFooterBlurred
                    radius="lg"
                    className="border-none h-[50vh] shadow-none"
                  >
                    <Image
                      alt="headernews"
                      width={1440}
                      height={1080}
                      src={
                        newsItem?.thumbnailUrl == ""
                          ? "/no-image.jpg"
                          : newsItem?.thumbnailUrl
                      }
                      className="w-full !h-[50vh] object-cover rounded-lg"
                    />

                    <CardFooter className="mb-1 max-h-[20vh] 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}-${newsItem?.slug}`}
                        >
                          <p className="text-left font-semibold text-lg lg:text-2xl">
                            {newsItem.title}
                          </p>
                        </Link>
                        <div className="flex flex-row gap-1">
                          <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>
                      </div>
                    </CardFooter>
                  </Card>
                </SwiperSlide>
              ))}
            </Swiper>
          ) : (
            <CircularProgress aria-label="Loading..." size="lg" />
          )}
        </div>
        <div className="lg:w-[25%] h-[50vh]  rounded-md text-white dark:text-black ">
          {/* <GPRKominfo /> */}

          {selectedTab === "media" ? (
            <div className="lg:!h-[50vh] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
              <div className="text-sm flex flex-row gap-3 mx-2 mb-2">
                <a
                  onClick={() => setSelectedTab("media")}
                  className={
                    "text-black border-b-3 border-red-400 cursor-pointer p-0"
                  }
                >
                  {t("terkini")}
                </a>
                <a
                  onClick={() => setSelectedTab("video")}
                  className={"text-slate-300 cursor-pointer"}
                >
                  Video Virtual
                </a>
              </div>
              <ScrollShadow hideScrollBar className="h-[39vh]">
                {article?.map((list: any, index: number) => (
                  <div
                    key={list?.id}
                    className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
                  >
                    <Link href={`news/detail/${list?.id}`}>
                      <p className="text-left font-semibold">{list?.title}</p>
                    </Link>
                    <div className="flex flex-row gap-1">
                      <p className="py-[2px] text-left text-xs">
                        {convertDateFormat(list?.createdAt)} WIB
                      </p>
                      <p className="flex items-center gap-1 text-xs">
                        <EyeIcon />
                        {list?.viewCount === null ? 0 : list?.viewCount}
                      </p>
                    </div>
                  </div>
                ))}
              </ScrollShadow>
              <Button
                className="w-full bg-gradient-to-r from-red-700  to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
                radius="none"
              >
                Lihat Semua
              </Button>
            </div>
          ) : (
            <div className="lg:!h-[35vh] dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
              <div className="text-[15px] flex flex-row gap-10">
                <a
                  onClick={() => setSelectedTab("media")}
                  className={"text-slate-300 cursor-pointer py-2"}
                >
                  {t("terkini")}
                </a>
                <a
                  onClick={() => setSelectedTab("video")}
                  className={
                    "text-black border-b-3 border-red-400 cursor-pointer py-2"
                  }
                >
                  Video Virtual
                </a>
              </div>
              <Link
                target="_blank"
                href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
                className="border-b-2 py-2 lg:py-4"
              >
                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
                INDONESIA
              </Link>
              <Link
                target="_blank"
                href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
                className="border-b-2 py-2 lg:py-4"
              >
                ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
                UNTUK MENGATASI PANDEMI COVID 19
              </Link>
              <Link
                target="_blank"
                href="https://www.youtube.com/watch?v=jaihQPjxcy4"
                className="border-b-2 py-2 lg:py-4"
              >
                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
                RADIKALISME
              </Link>
              <Link
                target="_blank"
                href="https://www.youtube.com/watch?v=umPEo0FYTQk"
                className="border-b-2 py-2 lg:py-4"
              >
                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
                SAHABAT MASYARAKAT
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}