mediahub-fe/components/landing-page/header-banner.tsx

"use client";
import { listData, listStaticBanner } from "@/service/landing/landing";
import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import { formatDateToIndonesian, getPublicLocaleTimestamp, textEllipsis } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import Image from "next/image";
import { useRouter } from "@/i18n/routing";

const HeaderBanner = () => {
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
  const poldaName: any = params?.polda_name;
  const [content, setContent] = useState([]);
  const [isBannerLoading, setIsBannerLoading] = useState(true);
  const [centerPadding, setCenterPadding] = useState<any>();
  const satkerName = params?.satker_name;

  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";

  useEffect(() => {
    // async function initState() {
    //   const res = await listCarousel();
    //   setContent(res?.data?.data);
    //   setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
    // }

    async function fetchData() {
      const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName);
      var data = res?.data?.data?.content;
      if (data) {
        const resStatic = await listStaticBanner(poldaName, locale == "en");
        for (let i = 0; i < resStatic?.data?.data?.length; i++) {
          const media = resStatic?.data.data[i]?.mediaUpload;
          media.fileTypeId = media.fileType?.id;
          data = data.filter((item: any) => item.id != media.id);
          data.splice(0, 0, media);
        }
        setContent(data);
      }
      setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
      setIsBannerLoading(false);
      console.log("Done");
    }

    fetchData();
  }, [params?.page]);

  const settings = {
    className: "center",
    // centerMode: true,
    infinite: true,
    centerPadding,
    slidesToShow: 2,
    autoplay: true,
    speed: 1500,
    autoplaySpeed: 15_000,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "60px",
          slidesToShow: 1,
        },
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "20px",
          slidesToShow: 1,
        },
      },
    ],
  };
  return (
    <div>
      {/* Header Left */}
      <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
        {isBannerLoading ? (
          <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
            <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
            <div className="space-y-2">
              <Skeleton className="h-4 w-[250px]" />
              <Skeleton className="h-4 w-[200px]" />
            </div>
          </div>
        ) : (
          <Carousel className="lg:w-2/3 lg:h-full ">
            <CarouselContent>
              {content?.map((row: any) => (
                <CarouselItem key={row?.id}>
                  <div className="relative h-[310px] lg:h-[420px]">
                    <Image priority={true} src={row?.smallThumbnailLink} alt="" width={1920} height={1080} className="w-full h-[310px] lg:h-full rounded-lg object-cover" />
                    <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
                      <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
                        <h3>{row.title}</h3>
                      </div>
                      <p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
                        {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
                        <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
                      </p>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
        )}

        {/* Header Right */}
        <div>
          {isBannerLoading ? (
            <>
              <div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
              <div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
                <Skeleton className="h-[73px] w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-[250px]" />
                  <Skeleton className="h-4 w-[200px]" />
                </div>
              </div>
            </>
          ) : (
            <ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
              {content?.map((item: any) => (
                <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                  <div className="flex-shrink-0 w-24 rounded-lg">
                    <Image priority={true} width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
                  </div>
                  <div className="w-[280px] lg:w-auto">
                    <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
                    <div onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer">
                      <h3 className="text-base font-bold mt-2">{textEllipsis(item?.title, 30)}</h3>
                    </div>
                    <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
                      {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                        <path
                          fill="currentColor"
                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
                        />
                      </svg>{" "}
                      {item?.clickCount}
                    </p>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

export default HeaderBanner;