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

"use client";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  ScrollShadow,
} from "@nextui-org/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");

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

  return (
    <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white  p-1 lg:p-8 lg:h-[70vh]">
      <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 + index}>
                <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] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
        <p className="text-lg font-bold h-10 text-center dark:text-white text-black">
          {t("berita")}
        </p>
        <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
          {article?.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 + index}
            >
              <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}`}
                  key={data?.id}
                  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-[#DD8306] 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-[67vh]">
        {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-[48px]",
                "!h-[48px]"
              );
              swiper.navigation.prevEl?.classList.add(
                "bg-white/70",
                "!text-black",
                "rounded-full",
                "!w-[48px]",
                "!h-[48px]"
              );
            }}
          >
            {article?.map((newsItem: any, index: number) => (
              <SwiperSlide key={newsItem.id + index} className="h-[67vh]">
                <Card
                  isFooterBlurred
                  radius="lg"
                  className="border-none h-[67vh] shadow-none"
                >
                  <Image
                    alt="headernews"
                    width={1440}
                    height={1080}
                    src={
                      newsItem?.thumbnailUrl == ""
                        ? "/no-image.jpg"
                        : newsItem?.thumbnailUrl
                    }
                    className="w-full !h-[67vh] 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-[67vh]  rounded-md text-white dark:text-black ">
        {/* <GPRKominfo /> */}
        <div className="text-[15px] flex flex-row gap-10">
          <a
            onClick={() => setSelectedTab("media")}
            className={
              selectedTab === "media"
                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
                : "text-slate-300 cursor-pointer py-2"
            }
          >
            Media Update
          </a>
          <a
            onClick={() => setSelectedTab("video")}
            className={
              selectedTab === "video"
                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
                : "text-slate-300 cursor-pointer py-2"
            }
          >
            Video Virtual
          </a>
        </div>
        {selectedTab === "media" ? (
          <div className="lg:!h-[62vh] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
            <ScrollShadow hideScrollBar className=" h-[54vh]">
              {article?.map((list: any, index: number) => (
                <div
                  key={list.id + index}
                  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-[#DD8306] text-white font-bold rounded-md focus:outline-none"
              radius="none"
            >
              Lihat Semua
            </Button>
          </div>
        ) : (
          <div className="w-full">
            <iframe
              width="100%"
              height="410"
              src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
              title="YouTube video player"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
            ></iframe>
          </div>
        )}
      </div>
    </div>
  );
}