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

import {
  getPublicCategoryDataNew,
} from "@/service/landing/landing";
import React, { useEffect, useState } from "react";
import { Reveal } from "./Reveal";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { useParams } from "next/navigation";
import { Link, useRouter } from "@/i18n/routing";
import { Button } from "../ui/button";
import ImageBlurry from "../ui/image-blurry";

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

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

  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    const response = await getPublicCategoryDataNew(
      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-0 py-10">
      <Reveal>
        <div className="flex flex-col">
          <h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
            {pathname?.split("/")[1] == "in" ? (
              <>
                <span className="text-[#bb3523] dark:text-white">
                  {t("category", { defaultValue: "Category" })}&nbsp;
                </span>
                {t("content", { defaultValue: "Content" })}
              </>
            ) : (
              <>
                <span className="text-[#bb3523] dark:text-white">
                  {t("content", { defaultValue: "Content" })}&nbsp;
                </span>
                {t("category", { defaultValue: "Category" })}
              </>
            )}
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {(seeAllValue ? categories : categories?.slice(0, 4))?.map(
              (category: any) => (
                <div key={category?.id}>
                  <Link
                  href={prefixPath + `/all/filter?category=${category?.id}`}
                    // onClick={() =>
                    //   router.push(
                    //     `${prefixPath}all/filter?category=${category?.id}`
                    //   )
                    // }
                    className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"
                  >
                    {/* Gambar */}
                    {/* <Image
                    priority={true}
                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                    alt="category"
                    width={2560}
                    height={1440}
                    src={category?.smallThumbnailLink}
                    className="w-full lg:h-[300px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                  /> */}
                    <ImageBlurry
                      src={category?.smallThumbnailLink}
                      alt="gambar-utama"
                      placeholder={`data:image/svg+xml;base64,${toBase64(
                        shimmer(700, 475)
                      )}`}
                      priority={true}
                      className="w-full lg:h-[300px] h-40 object-contain group-hover:scale-110 transition-transform duration-300"
                    />

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

                    {/* Judul */}
                    <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 text-white">
                      <h3 className="text-sm font-semibold text-center">
                        {category?.name}
                      </h3>
                    </div>
                  </Link>
                </div>
              )
            )}
          </div>

          {/* Tombol See More / See Less */}
          {categories?.length > 4 && (
            <div className="flex items-center flex-row justify-center mt-6">
              <Button
                onClick={() => setSeeAllValue(!seeAllValue)}
                className="bg-white dark:bg-black hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
              >
                {seeAllValue
                  ? t("seeLess", { defaultValue: "See Less" })
                  : t("seeMore", { defaultValue: "See More" })}
              </Button>
            </div>
          )}

          {/* <div className="flex items-center flex-row justify-center mt-7">
          <div
            onClick={() =>
              router.push(
                prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`
              )
            }
            className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"
          >
            {t("seeAll", { defaultValue: "See All" })}
          </div>
        </div> */}
        </div>
      </Reveal>
    </div>
  );
};

export default ContentCategory;