repush

components/landing-page/content-category.tsx

@@ -1,7 +1,4 @@
-import {
+import { getCategoryData, getPublicCategoryData } from "@/service/landing/landing";
-  getCategoryData,
-  getPublicCategoryData,
-} from "@/service/landing/landing";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { Button } from "../ui/button";
@@ -24,15 +21,7 @@ const ContentCategory = (props: { group?: string }) => {
   }, []);
   const initFetch = async () => {
     const response = await getPublicCategoryData(
-      props.group == "mabes"
+      props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
-        ? ""
-        : props.group == "polda" && poldaName && String(poldaName)?.length > 1
-        ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
-        ? "satker-" + satkerName
-        : "",
       "",
       locale == "en" ? true : false
     );
@@ -58,10 +47,7 @@ const ContentCategory = (props: { group?: string }) => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) =>
+  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
 
   return (
     <div className="px-4 lg:px-24 py-10">
@@ -85,29 +71,10 @@ const ContentCategory = (props: { group?: string }) => {
           {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">
+                <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(
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-                      shimmer(700, 475)
-                    )}`}
                     alt="category"
                     width={2560}
                     height={1440}
@@ -120,38 +87,17 @@ const ContentCategory = (props: { group?: string }) => {
 
                   {/* 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">
+                    <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
-                      {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">
+              <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(
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-                    shimmer(700, 475)
-                  )}`}
                   alt="category"
                   width={2560}
                   height={1440}
@@ -164,19 +110,14 @@ const ContentCategory = (props: { group?: string }) => {
 
                 {/* 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">
+                  <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
-                    {category?.name}
-                  </h3>
                 </div>
               </Link>
             )
           )}
         </div>
         <div className="flex items-center flex-row justify-center">
-          <Button
+          <Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
-            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>