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

import { getCategoryData } 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";

const ContentCategory = () => {
  const [categories, setCategories] = useState<any>();
  const t = useTranslations("LandingPage");

  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    const response = await getCategoryData();
    console.log("category", response);
    setCategories(response?.data?.data?.content);
  };

  const [searchTerm, setSearchTerm] = useState("");
  const [seeAllValue, setSeeAllValue] = useState(false);
  const pathname = usePathname();
  console.log("split", pathname);
  return (
    <div className="mx-auto px-4 lg:px-20 py-10 max-w-screen-2xl ">
      <Reveal>
        <h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
          {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")}
            </>
          )}
        </h2>
        <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>

        <div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
          {categories?.map((category: any, index: number) =>
            !seeAllValue ? (
              index < 8 ? (
                <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
                  <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
                  <div className="absolute  bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
                    <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">
                <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
                <div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
                  <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;