mediahub-fe/components/landing-page/content-category.tsx

import {
  getCategoryData,
  getPublicCategoryData,
} from "@/service/landing/landing";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { Button } from "../ui/button";
import { Reveal } from "./Reveal";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { useParams } from "next/navigation";
import Image from "next/image";

const ContentCategory = (props: { group?: string }) => {
  const [categories, setCategories] = useState<any>();
  const t = useTranslations("LandingPage");
  const params = useParams();
  const locale = params?.locale;
  const poldaName = params?.polda_name;
  const satkerName = params?.satker_name;

  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    const response = await getPublicCategoryData(
      props.group == "mabes"
        ? ""
        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
        ? poldaName
        : props.group == "satker" &&
          satkerName &&
          String(satkerName)?.length > 1
        ? "satker-" + satkerName
        : "",
      "",
      locale == "en" ? true : false
    );
    console.log("category", response);
    setCategories(response?.data?.data?.content);
  };

  const [searchTerm, setSearchTerm] = useState("");
  const [seeAllValue, setSeeAllValue] = useState(false);
  const pathname = usePathname();

  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="px-4 lg:px-24 py-10">
      <Reveal>
        <h2 className="bg-[#c03724] rounded-md p-3 w-fit text-white">
          {/* {pathname?.split("/")[1] == "in" ? (
            <>
              <span className="text-black dark:text-white">{t("category")}&nbsp;</span>
              {t("content")}
            </>
          ) : (
            <>
              <span className="text-black dark:text-white">{t("content")}&nbsp;</span>
              {t("category")}
            </>
          )} */}
          Kategori Konten
        </h2>
        {/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}

        <div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4">
          {categories?.map((category: any, index: number) =>
            !seeAllValue ? (
              index < 4 ? (
                // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
                //   <Image
                //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                //     alt="category"
                //     width={2560}
                //     height={1440}
                //     src={category?.thumbnailLink}
                //     className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                //   />
                //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
                //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                //   </div>
                // </Link>
                <Link
                  key={category?.id}
                  href={`all/filter?category=${category?.id}`}
                  className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
                >
                  {/* Gambar */}
                  <Image
                    placeholder={`data:image/svg+xml;base64,${toBase64(
                      shimmer(700, 475)
                    )}`}
                    alt="category"
                    width={2560}
                    height={1440}
                    src={category?.thumbnailLink}
                    className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                  />

                  {/* Overlay gelap */}
                  <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>

                  {/* Judul */}
                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
                    <h3 className="text-sm font-semibold truncate">
                      {category?.name}
                    </h3>
                  </div>
                </Link>
              ) : (
                ""
              )
            ) : (
              // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
              //   <Image
              //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
              //     alt="category"
              //     width={2560}
              //     height={1440}
              //     src={category?.thumbnailLink}
              //     className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
              //   />
              //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
              //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
              //   </div>
              // </Link>
              <Link
                key={category?.id}
                href={`all/filter?category=${category?.id}`}
                className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
              >
                {/* Gambar */}
                <Image
                  placeholder={`data:image/svg+xml;base64,${toBase64(
                    shimmer(700, 475)
                  )}`}
                  alt="category"
                  width={2560}
                  height={1440}
                  src={category?.thumbnailLink}
                  className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                />

                {/* Overlay Gelap */}
                <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></div>

                {/* Judul */}
                <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                  <h3 className="text-sm font-semibold truncate">
                    {category?.name}
                  </h3>
                </div>
              </Link>
            )
          )}
        </div>
        <div className="flex items-center flex-row justify-center">
          <Button
            onClick={() => setSeeAllValue(!seeAllValue)}
            className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
          >
            {seeAllValue ? t("seeLess") : t("seeMore")}
          </Button>
        </div>
      </Reveal>
    </div>
  );
};

export default ContentCategory;