From c0b54c6eb2fda7c807ee935880346b03b257632b Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 19 May 2025 14:42:15 +0700
Subject: [PATCH] fix:next/image to heroui/image

---
 components/landing/HeaderNews.tsx    |  6 +-----
 components/landing/MedolUpdate.tsx   |  8 +-------
 components/landing/adds-carousel.tsx |  4 +---
 components/landing/banner-new.tsx    | 16 ++--------------
 components/page/detail-news.tsx      |  8 ++------
 5 files changed, 7 insertions(+), 35 deletions(-)

diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index e3721d6..0584085 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -4,6 +4,7 @@ import {
   Card,
   CardFooter,
   CircularProgress,
+  Image,
   ScrollShadow,
 } from "@heroui/react";
 import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
@@ -21,7 +22,6 @@ import { useTranslations } from "next-intl";
 import { data } from "autoprefixer";
 import { Controller as FormController } from "react-hook-form";
 import { Nabla } from "next/font/google";
-import Image from "next/image";
 
 export default function HeaderNews() {
   const [article, setArticle] = useState<any>([]);
@@ -121,8 +121,6 @@ export default function HeaderNews() {
                           ? "/no-image.jpg"
                           : newsItem?.thumbnailUrl
                       }
-                      width={480}
-                      height={480}
                       className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover !rounded-b-none"
                     />
 
@@ -251,8 +249,6 @@ export default function HeaderNews() {
                   >
                     <Image
                       alt="headernews"
-                      width={480}
-                      height={480}
                       src={
                         newsItem?.thumbnailUrl == ""
                           ? "/no-image.jpg"
diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx
index be8ba1a..e8ed5ee 100644
--- a/components/landing/MedolUpdate.tsx
+++ b/components/landing/MedolUpdate.tsx
@@ -3,6 +3,7 @@ import {
   Card,
   CardBody,
   CardFooter,
+  Image,
   Spinner,
   Tab,
   Tabs,
@@ -24,7 +25,6 @@ import {
 import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
 import PolriTvWidget from "../ui/social-media/polri-tv";
 import { useTranslations } from "next-intl";
-import Image from "next/image";
 
 export default function MedolUpdate() {
   const [selectedTab, setSelectedTab] = useState<any>("mediahub");
@@ -181,8 +181,6 @@ export default function MedolUpdate() {
                         >
                           <CardBody className="overflow-visible p-0">
                             <Image
-                              width={480}
-                              height={480}
                               alt="thumbnail"
                               className="object-cover !h-[20vh]"
                               // src={newsItem.thumbnailLink}
@@ -272,8 +270,6 @@ export default function MedolUpdate() {
                         >
                           <CardBody className="overflow-visible p-0">
                             <Image
-                              width={480}
-                              height={480}
                               alt="thumbnail"
                               className="object-cover !h-[20vh]"
                               src={newsItem?.image}
@@ -365,8 +361,6 @@ export default function MedolUpdate() {
                         >
                           <CardBody className="overflow-visible p-0">
                             <Image
-                              width={480}
-                              height={480}
                               alt="thumnail"
                               className="object-cover !h-[20vh]"
                               src={newsItem?.thumbnail}
diff --git a/components/landing/adds-carousel.tsx b/components/landing/adds-carousel.tsx
index 5f8e920..874b02c 100644
--- a/components/landing/adds-carousel.tsx
+++ b/components/landing/adds-carousel.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import Image from "next/image";
 import {
   Button,
   Card,
   CardFooter,
   CircularProgress,
+  Image,
   ScrollShadow,
 } from "@heroui/react";
 import {
@@ -138,8 +138,6 @@ export default function AddsCarousel() {
                   // )
                   <Image
                     alt="headernews"
-                    width={1440}
-                    height={1080}
                     className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
                     src={
                       newsItem?.contentFileUrl == ""
diff --git a/components/landing/banner-new.tsx b/components/landing/banner-new.tsx
index 014b476..40c48b6 100644
--- a/components/landing/banner-new.tsx
+++ b/components/landing/banner-new.tsx
@@ -34,12 +34,12 @@ import {
   PopoverContent,
   Accordion,
   AccordionItem,
+  Image,
 } from "@heroui/react";
 import storedLanguage from "@/store/language-store";
 import { ThemeSwitch } from "../theme-switch";
 import { siteConfig, SiteConfig } from "@/config/site";
 import { getAdvertise } from "@/services/advertisement";
-import Image from "next/image";
 
 const images = [
   "/landing-1.jpg",
@@ -129,8 +129,6 @@ export default function BannerHumasNew() {
                 {withImage && (
                   <Image
                     alt="logo"
-                    width={1960}
-                    height={1080}
                     src={menu.img}
                     className="w-[45px] h-[45px]"
                   />
@@ -239,8 +237,6 @@ export default function BannerHumasNew() {
                     : img?.contentFileUrl
                 }
                 alt={`humasbanner-${index}`}
-                width={1960}
-                height={1080}
                 className="w-screen h-[45vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
               />
             </Link>
@@ -250,8 +246,6 @@ export default function BannerHumasNew() {
             <Image
               src={images[0]}
               alt={`humasbanner-1`}
-              width={1960}
-              height={1080}
               className="w-screen h-[45vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
             />
           </Link>
@@ -270,13 +264,7 @@ export default function BannerHumasNew() {
                 OBYEKTIF - DIPERCAYA - PARTISIPASI
               </p>
             </div>
-            <Image
-              src="/divhumas.png"
-              alt="logo-humas"
-              className="w-[200px]"
-              width={1960}
-              height={1080}
-            />
+            <Image src="/divhumas.png" alt="logo-humas" className="w-[200px]" />
           </div>
           <div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10 lg:mt-24">
             <div className="flex flex-row  gap-6">
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index c0a4c01..b9a376d 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -4,7 +4,6 @@ import {
   formatMonthString,
   formatTextToHtmlTag,
 } from "@/utils/global";
-import Image from "next/image";
 import {
   CalendarIcon,
   ChevronLeftIcon,
@@ -26,6 +25,7 @@ import { useEffect, useState } from "react";
 import { image } from "@heroui/theme";
 import Cookies from "js-cookie";
 import { saveActivity } from "@/services/activity-log";
+import { Image } from "@heroui/react";
 
 const token = Cookies.get("access_token");
 const uid = Cookies.get("uie");
@@ -155,8 +155,6 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
       <div className="flex justify-center my-2 lg:my-5">
         {data?.files?.length > 0 && (
           <Image
-            width={1440}
-            height={1080}
             alt="Main Image"
             src={data?.files[imageNow]?.file_url}
             className="object-cover w-[100%] rounded-md"
@@ -172,9 +170,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
               className="cursor-pointer"
             >
               <Image
-                width={480}
-                height={480}
-                alt="NextUI hero Image"
+                alt="Sub Image"
                 src={file?.file_url}
                 className="object-cover w-[75px] lg:w-[150px] h-[50px] lg:h-[100px] rounded-md"
               />