update/change to components nextjs

next.config.ts

@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 import links from "./src/links/index";
 const nextConfig: NextConfig = {
   /* config options here */
-   images: {
+  images: {
     remotePatterns: [
       {
         protocol: "https",
@@ -10,6 +10,12 @@ const nextConfig: NextConfig = {
         port: "",
         pathname: "/vcci/images/**",
       },
+      {
+        protocol: "https",
+        hostname: "vcci-hcm.org.vn", // WordPress / media host
+        port: "",
+        pathname: "/wp-content/uploads/**",
+      },
     ],
   },
 };

src/app/(main)/(home)/components/card-event/index.tsx

@@ -2,21 +2,21 @@ import { EventItem } from '@/api/types/event'
 import BASE_URL from '@/links'
 import dayjs from 'dayjs';
 import AppEditorContent from '@/components/shared/editor-content';
+import Link from "next/link";
+import ImageNext from "@/components/base/image";
 
 function CardEvent({ event }: { event: EventItem }) {
   return (
-    <a
+    <Link
       href={`hoat-dong/su-kien/${event.id}`}
       className='flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3 p-2 sm:p-3 border border-gray-200 bg-white rounded-md'
     >
-      <img
+      <ImageNext
         src={`${BASE_URL.imageEndpoint}${event.image}`}
         alt={event.name}
-        className='w-[100px] md:w-[130px] aspect-3/2 object-cover'
-        onError={(e) => {
-          e.currentTarget.onerror = null
-          e.currentTarget.src = "/img-error.png"
-        }}
+        className='aspect-3/2 object-cover'
+        width={130}
+        height={86}
       />
       <div className='flex-1'>
         <p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
@@ -27,7 +27,7 @@ function CardEvent({ event }: { event: EventItem }) {
         </p>
         {/* <AppEditorContent className='line-clamp-2' value={event.description} /> */}
       </div>
-    </a>
+    </Link>
   );
 }
 

src/app/(main)/(home)/components/card-news/index.tsx

@@ -2,21 +2,21 @@ import { NewsItem } from "@/api/types/news";
 import BASE_URL from "@/links";
 import dayjs from "dayjs";
 import AppEditorContent from "@/components/shared/editor-content";
+import Link from "next/link";
+import ImageNext from "@/components/base/image";
 
 function CardNews({ news }: { news: NewsItem }) {
   return (
-    <a
+    <Link
       href={`${news.external_link}`}
       className="flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3"
     >
-      <img
+      <ImageNext
         src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
         alt={news.title}
-        className="w-[100px] md:w-[130px] aspect-3/2 object-cover"
-        onError={(e) => {
-          e.currentTarget.onerror = null
-          e.currentTarget.src = "/img-error.png"
-        }}
+        className="aspect-3/2 object-cover"
+        width={130}
+        height={86}
       />
       <div className="flex-1">
         <p className="text-[#363636] font-bold text-sm line-clamp-2">
@@ -27,7 +27,7 @@ function CardNews({ news }: { news: NewsItem }) {
         </p>
         {/* <AppEditorContent className='line-clamp-2' value={news.description} /> */}
       </div>
-    </a>
+    </Link>
   );
 }
 

src/components/base/image/index.tsx

+import Image from "next/image";
+import { useState } from "react";
+
+const ImageNext = ({ src, alt, width, height, className, onError }: any) => {
+  const [imgSrc, setImgSrc] = useState(src);
+
+  return (
+    <Image
+      src={imgSrc}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      onError={() => setImgSrc(onError || "/img-error.png")}
+    />
+  );
+};
+
+export default ImageNext;

src/constants/memberImages.ts

+const memberImages = [
+  "/home/hoi-vien-tieu-bieu/logo-GTD-768x768.png.webp",
+  "/home/hoi-vien-tieu-bieu/Nhua-Long-Thanh_Logo.jpg.webp",
+  "/home/hoi-vien-tieu-bieu/Nova_Group_logo-1.png.webp",
+  "/home/hoi-vien-tieu-bieu/samngoclinh-1-768x768.png.webp",
+  "/home/hoi-vien-tieu-bieu/Screenshot-2022-12-26-144136-768x768.png.webp",
+  "/home/hoi-vien-tieu-bieu/UOB-logo_Vuong.jpeg.webp",
+];
+
+export default memberImages;
\ No newline at end of file

src/constants/partnerImages.ts

+const partnerImages = [
+  "/home/doi-tac/AMFORI-1.png.webp",
+  "/home/doi-tac/AUS4SKILLS-1.png.webp",
+  "/home/doi-tac/BetterWork-1.png.webp",
+  "/home/doi-tac/BOI-LOGO.jpg.webp",
+  "/home/doi-tac/DNV-logo-1-1.png.webp",
+  "/home/doi-tac/GERMAN-COOPERATION-1.png.webp",
+  "/home/doi-tac/GIZ.png.webp",
+  "/home/doi-tac/HBA.png.webp",
+  "/home/doi-tac/ILO-1.png.webp",
+  "/home/doi-tac/InvestHK.png.webp",
+  "/home/doi-tac/IOM-1.png.webp",
+  "/home/doi-tac/JICA-134x100-1-1.jpg.webp",
+  "/home/doi-tac/KIRBY.png.webp",
+  "/home/doi-tac/NHO-1.png.webp",
+  "/home/doi-tac/OXFAM-1.png.webp",
+  "/home/doi-tac/RECOTVET-1.png.webp",
+  "/home/doi-tac/SC-1.png.webp",
+  "/home/doi-tac/UNDP.png.webp",
+];
+
+export default partnerImages;
\ No newline at end of file

src/helpers/stripImageAndHtml.ts

+const stripImagesAndHtml = (html?: string) => {
+  if (!html) return ''
+  // remove img tags first
+  const withoutImgs = html.replace(/<img[^>]*>/gi, '')
+  // use DOMParser on client for robust extraction
+  if (typeof window !== 'undefined' && typeof DOMParser !== 'undefined') {
+    try {
+      const doc = new DOMParser().parseFromString(withoutImgs, 'text/html')
+      return doc.body.textContent || ''
+    } catch {
+      // fallback to regex
+    }
+  }
+  return withoutImgs.replace(/<[^>]*>/g, '')
+}
+
+export default stripImagesAndHtml
\ No newline at end of file