mediahub-fe/components/landing-page/hero.tsx

import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
import React, { useEffect, useState } from "react";
import "swiper/css/bundle";
import "swiper/css/navigation";
import { getHeroData } from "@/service/landing/landing";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { Skeleton } from "../ui/skeleton";
import Image from "next/image";
import Cookies from "js-cookie";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../ui/card";
import { Label } from "../ui/label";
import { Input } from "../ui/input";
import { Button } from "../ui/button";

const HeroModal = ({ onClose }: { onClose: () => void }) => {
  const [heroData, setHeroData] = useState<any>();
  const params = useParams();
  const locale = params?.locale;

  useEffect(() => {
    async function fetchCategories() {
      const url = "https://netidhub.com/api/csrf";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return data;
      } catch (error) {
        console.error("Fetch error: ", error);
      }
    }

    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getHeroData();
    console.log(response);
    setHeroData(response?.data?.data?.content);
  };
  return (
    <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50">
      <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
        <Carousel className="w-full">
          <CarouselContent>
            {heroData?.map((list: any, index: any) => (
              <CarouselItem key={list?.id}>
                <div className="relative h-[310px] lg:h-[420px]">
                  <button
                    onClick={onClose}
                    className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white"
                  >
                    ✕
                  </button>
                  <Image
                    src={list?.thumbnailLink}
                    alt="gambar-utama"
                    width={1920}
                    height={1080}
                    placeholder={`data:image/svg+xml;base64,${toBase64(
                      shimmer(700, 475)
                    )}`}
                    className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                  />

                  <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-blur-sm text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
                    <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
                    <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
                      {list?.categoryName || "Liputan Kegiatan"}
                    </span>

                    <Link href={`${locale}/image/detail/${list?.slug}`}>
                      <h2 className="text-lg leading-tight">{list?.title}</h2>
                    </Link>

                    <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
                      {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
                      {list?.timezone || "WIB"} |{" "}
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="1em"
                        height="1em"
                        viewBox="0 0 24 24"
                        className="inline-block"
                      >
                        <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>
                      {list?.clickCount}
                    </p>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
          <CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
        </Carousel>
      </div>
    </div>
  );
};

const Hero: React.FC = () => {
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const locale = params?.locale;
  const [isLoading, setIsLoading] = useState<any>(true);
  const [heroData, setHeroData] = useState<any>();
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  useEffect(() => {
    const roleId = Cookies.get("urie");
    if (!roleId) {
      setShowModal(true); // hanya munculkan modal jika urie tidak ada
    }
    initFetch();
  }, []);

  useEffect(() => {
    async function fetchCategories() {
      const url = "https://netidhub.com/api/csrf";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return data;
      } catch (error) {
        console.error("Fetch error: ", error);
      }
    }

    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getHeroData();
    console.log(response);
    setHeroData(response?.data?.data?.content);
  };

  const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#bcbcbd" offset="20%" />
      <stop stop-color="#f9fafb" offset="50%" />
      <stop stop-color="#bcbcbd" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#bcbcbd" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>`;

  const toBase64 = (str: string) =>
    typeof window === "undefined"
      ? Buffer.from(str).toString("base64")
      : window.btoa(str);

  return (
    <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">
      <div className="relative">
        {showModal && <HeroModal onClose={() => setShowModal(false)} />}
      </div>
      {isLoading ? (
        <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>
            {heroData?.map((list: any) => (
              <CarouselItem key={list?.id}>
                <div className="relative h-[310px] lg:h-[420px]">
                  <Image
                    src={list?.thumbnailLink}
                    alt="gambar-utama"
                    width={1920}
                    height={1080}
                    placeholder={`data:image/svg+xml;base64,${toBase64(
                      shimmer(700, 475)
                    )}`}
                    className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                  />

                  <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-blur-sm text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
                    <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
                    <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
                      {list?.categoryName || "Liputan Kegiatan"}
                    </span>

                    <Link href={`${locale}/image/detail/${list?.slug}`}>
                      <h2 className="text-lg leading-tight">{list?.title}</h2>
                    </Link>

                    <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
                      {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
                      {list?.timezone || "WIB"} |{" "}
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="1em"
                        height="1em"
                        viewBox="0 0 24 24"
                        className="inline-block"
                      >
                        <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>
                      {list?.clickCount}
                    </p>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="hover:bg-black ml-1 lg:ml-0" />
          <CarouselNext className="hover:bg-black mr-1 lg:mr-0" />
        </Carousel>
      )}

      <div>
        {isLoading ? (
          <>
            <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">
            <Tabs defaultValue="national" className="w-[350px]">
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="national">Nasional</TabsTrigger>
                <TabsTrigger value="polda">Polda</TabsTrigger>
                <TabsTrigger value="satker">Satker</TabsTrigger>
              </TabsList>
              <TabsContent value="national">
                {heroData?.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
                        placeholder={`data:image/svg+xml;base64,${toBase64(
                          shimmer(700, 475)
                        )}`}
                        width={720}
                        height={480}
                        src={item?.thumbnailLink}
                        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>
                      <Link href={`${locale}/image/detail/${item?.slug}`}>
                        <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
                          {item?.title}
                        </h3>
                      </Link>
                      <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>
                ))}
              </TabsContent>
              <TabsContent value="polda">
                {heroData
                  ?.filter((item: any) => item.isPublishOnPolda === true)
                  .map((item: any, index: any) => (
                    <li
                      key={item?.id}
                      className="flex gap-4 flex-row lg:w-full "
                    >
                      <div className="flex-shrink-0 w-24 rounded-lg">
                        <Image
                          placeholder={`data:image/svg+xml;base64,${toBase64(
                            shimmer(700, 475)
                          )}`}
                          width={720}
                          height={480}
                          src={item?.thumbnailLink}
                          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>
                        <Link href={`${locale}/image/detail/${item?.slug}`}>
                          <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
                            {item?.title}
                          </h3>
                        </Link>
                        <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>
                  ))}
              </TabsContent>
              <TabsContent value="satker">
                {heroData?.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
                        placeholder={`data:image/svg+xml;base64,${toBase64(
                          shimmer(700, 475)
                        )}`}
                        width={720}
                        height={480}
                        src={item?.thumbnailLink}
                        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>
                      <Link href={`${locale}/image/detail/${item?.slug}`}>
                        <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
                          {item?.title}
                        </h3>
                      </Link>
                      <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>
                ))}
              </TabsContent>
            </Tabs>
          </ul>
        )}
      </div>
    </div>
  );
};

export default Hero;