From 5c340a05a2390fd589b22d083912c129b397272a Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Mon, 28 Jul 2025 15:16:03 +0700
Subject: [PATCH] fixing

---
 .../campaign-list/component/column.tsx        | 26 +++++++--------
 .../broadcast/email/component/column.tsx      | 26 +++++++--------
 .../broadcast/whatsapp/component/column.tsx   | 26 +++++++--------
 components/landing-page/hero-new.tsx          | 14 +++++---
 components/ui/image-blurry.tsx                | 33 ++++++++++++-------
 5 files changed, 68 insertions(+), 57 deletions(-)

diff --git a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
index 139090ad..cfda527e 100644
--- a/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
@@ -73,21 +73,21 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
-              >
+            <Link
+              href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Detail
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
-              >
+              </DropdownMenuItem>
+            </Link>
+            <Link
+              href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Edit
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              </DropdownMenuItem>
+            </Link>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
               <a>Delete</a>
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx b/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
index e4235b22..5e5c1abf 100644
--- a/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
@@ -85,23 +85,21 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
+            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Detail
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/email/${row.original.id}`}>
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/email/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Email Blast
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Whatsapp Blast
-              </Link>
-            </DropdownMenuItem>
+              </DropdownMenuItem>
+            </Link>
           </DropdownMenuContent>
         </DropdownMenu>
       );
diff --git a/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx b/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
index a9a32f16..aee23cef 100644
--- a/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
+++ b/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
@@ -80,23 +80,21 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
+            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Detail
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/email/${row.original.id}`}>
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/email/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Email Blast
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
                 Whatsapp Blast
-              </Link>
-            </DropdownMenuItem>
+              </DropdownMenuItem>
+            </Link>
           </DropdownMenuContent>
         </DropdownMenu>
       );
diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index cf7d170f..3697ddb2 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -49,6 +49,7 @@ import "swiper/css/pagination";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Link } from "@/i18n/routing";
 import { listBannerHero } from "@/service/settings/settings";
+import ImageBlurry from "../ui/image-blurry";
 
 type HeroModalProps = {
   onClose: () => void;
@@ -163,7 +164,7 @@ const HeroModal = ({
           autoplay={{ delay: 3000 }}
           className="mySwiper w-full"
         >
-          {dataContent.map((list: any) => (
+          {dataContent?.map((list: any) => (
             <SwiperSlide key={list?.id}>
               <div className="relative h-[310px] lg:h-[420px]">
                 <button
@@ -353,7 +354,7 @@ const HeroNew = (props: { group?: string }) => {
     const timer = setTimeout(() => {
       console.log("Show modal popup");
       setShowModal(true);
-    }, 5000); 
+    }, 5000);
 
     return () => clearTimeout(timer);
   }, []);
@@ -542,12 +543,15 @@ const HeroNew = (props: { group?: string }) => {
                   <SwiperSlide key={list?.id}>
                     <div className="relative h-[310px] lg:h-[700px]">
                       {/* Gambar */}
-                      <Image
+                      <ImageBlurry
                         priority
                         src={list?.smallThumbnailLink}
                         alt="gambar"
-                        fill
-                        className="object-cover w-full h-full"
+                        style={{
+                          objectFit: "contain",
+                          width: "100%",
+                          height: "100%",
+                        }}
                       />
 
                       {/* Overlay */}
diff --git a/components/ui/image-blurry.tsx b/components/ui/image-blurry.tsx
index fc32ef6d..16ed8b1a 100644
--- a/components/ui/image-blurry.tsx
+++ b/components/ui/image-blurry.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
 interface ImageBlurryProps {
   src: string;
@@ -6,10 +6,11 @@ interface ImageBlurryProps {
   classname?: string;
   key?: string | number;
   style?: React.CSSProperties;
+  priority?: boolean;
 }
 
 const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
-  const { src, alt, classname, key, style } = props;
+  const { src, alt, classname, key, style, priority = false } = props;
 
   const [imgSrc, setImgSrc] = useState<string>(src);
   const [isError, setIsError] = useState<boolean>(false);
@@ -19,12 +20,12 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
   }, [src]);
 
   const handleImage = () => {
-    const pics = document.querySelectorAll<HTMLImageElement>('img');
+    const pics = document.querySelectorAll<HTMLImageElement>("img");
     pics.forEach((pic) => {
       if (pic.complete) {
         checkImage(pic);
       } else {
-        pic.addEventListener('load', function () {
+        pic.addEventListener("load", function () {
           checkImage(this);
         });
       }
@@ -33,16 +34,16 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
 
   const checkImage = (img: HTMLImageElement) => {
     if (img.naturalHeight > img.naturalWidth) {
-      img.classList.add('portrait');
+      img.classList.add("portrait");
     } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
-      img.classList.add('square');
+      img.classList.add("square");
     } else {
-      img.classList.add('landscape');
+      img.classList.add("landscape");
     }
   };
 
   const onLoad = () => {
-    console.log('Image loaded:', src);
+    console.log("Image loaded:", src);
     handleImage();
   };
 
@@ -51,9 +52,19 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
     //     <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
     //     <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
     // </div>
-    <div className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg" key={key} style={style}>
-      <div className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
-      <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
+    <div
+      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
+      key={key}
+      style={style}
+    >
+      <div
+        className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg"
+        style={{ backgroundImage: `url(${imgSrc})` }}
+      ></div>
+      <div
+        className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg"
+        style={{ backgroundImage: `url(${imgSrc})` }}
+      ></div>
     </div>
   );
 };