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

"use client";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  Image,
  ScrollShadow,
} from "@heroui/react";
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 "@/services/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>([]);
  const [banner, setBanner] = useState<any>([]);

  // useEffect(() => {

  // }, []);

  useEffect(() => {
    getArticle();
    getBanner();
    getHotNews();
  }, []);

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

  async function getHotNews() {
    const req = {
      page: 1,
      search: "",
      limit: "10",
      sort: "desc",
      categoryIds: "791802",
      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-[540px] w-full lg:w-[75%] lg:mx-auto">
        <div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
          {hotNews ? (
            <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-[32px]",
                  "!h-[32px]"
                );
                swiper.navigation.prevEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[32px]",
                  "!h-[32px]"
                );
              }}
            >
              {hotNews?.map((newsItem: any, index: number) => (
                <SwiperSlide key={newsItem?.id}>
                  <Card
                    radius="lg"
                    className="border-none rounded-xl shadow-none"
                  >
                    <Image
                      alt="headernews"
                      src={
                        newsItem?.thumbnailUrl == ""
                          ? "/no-image.jpg"
                          : newsItem?.thumbnailUrl
                      }
                      className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover !rounded-b-none"
                    />

                    <CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">
                      <div className="text-black dark:text-white">
                        <Link
                          href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                        >
                          <p className="text-left font-semibold text-sm">
                            {textEllipsis(newsItem.title, 40)}
                          </p>
                        </Link>
                        <p className="py-[2px] text-left text-xs">
                          {convertDateFormat(newsItem.createdAt)} WIB
                        </p>
                        <p className="flex items-center gap-1 text-xs">
                          <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-[90%] lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[500px] mx-auto">
          <p className="text-base font-bold text-center dark:text-white text-black">
            {/* {t("berita")} */}
            Hot Topik
          </p>
          <ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
            {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")} */}
                Lihat Semua
              </Button>
            </Link>
          </div>
        </div>

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

                    <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">
                            {textEllipsis(newsItem.title, 40)}
                          </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="w-[90%] lg:w-[25%] h-[50vh] lg:h-[500px]  rounded-md text-white dark:text-black mx-auto lg:mx-0">
          {/* <GPRKominfo /> */}

          {selectedTab === "media" ? (
            <div className="lg:h-[500px] p-2 dark:bg-stone-800  bg-[#f0f0f0] text-black dark:text-white rounded-lg">
              <div className="text-sm flex flex-row gap-3 mx-2 mb-2">
                <a
                  onClick={() => setSelectedTab("media")}
                  className={
                    "text-black dark:text-white border-b-3 border-red-400 cursor-pointer p-0"
                  }
                >
                  {/* {t("terkini")} */}
                  Berita Terkini
                </a>
                <a
                  onClick={() => setSelectedTab("video")}
                  className={"text-slate-300 cursor-pointer"}
                >
                  Video Virtual
                </a>
              </div>
              <ScrollShadow hideScrollBar className="h-[39vh] lg:h-[400px]">
                {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">
                        {" "}
                        {textEllipsis(list.title, 120)}
                      </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>
              <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"
                >
                  Lihat Semua
                </Button>
              </Link>
            </div>
          ) : (
            <div className="lg:!h-[50vh] p-2 dark:bg-stone-800  bg-[#f0f0f0] text-black dark:text-white rounded-lg">
              <div className="text-sm flex flex-row gap-3 mx-2 mb-2">
                <a
                  className={"text-slate-300 cursor-pointer"}
                  onClick={() => setSelectedTab("media")}
                >
                  {/* {t("terkini")} */}
                  Berita Terkini
                </a>
                <a
                  onClick={() => setSelectedTab("video")}
                  className={
                    "text-black dark:text-white border-b-3 border-red-400 cursor-pointer p-0"
                  }
                >
                  Video Virtual
                </a>
              </div>
              <ScrollShadow hideScrollBar className="h-[39vh]">
                <div className="p-2 flex flex-col gap-2 text-sm">
                  <Link
                    target="_blank"
                    href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
                  >
                    IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI
                    UNTUK INDONESIA
                  </Link>
                  <Link
                    target="_blank"
                    href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
                  >
                    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="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
                  >
                    IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
                    RADIKALISME
                  </Link>
                  <Link
                    target="_blank"
                    href="https://www.youtube.com/watch?v=umPEo0FYTQk"
                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
                  >
                    IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
                    SAHABAT MASYARAKAT
                  </Link>
                </div>
              </ScrollShadow>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}