update 27/01

src/components/shared/ArticleItem.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { formatArticleTime } from "@/lib/utils";
+
+export default function ArticleItem({ item }: any) {
+    const url   = item.external_url ? item.external_url : item.url;
+    const time  = item.article_time ? item.article_time : item.lastUpdate;
+
+    return (
+        <>
+            <div className="art-item" data-id={item.id}>
+                <Link href={url} className="art-img" 
+                    {...(item.external_url ? { 
+                        target: "_blank", 
+                        rel: "noopener noreferrer" 
+                    } : {})}
+                >
+                    <img src={item.image.original} 
+                         alt={item.title} 
+                         width={100} 
+                         height={100} />
+                </Link>
+
+                <div className="art-text">
+                    <Link href={url} className="art-title" 
+                        {...(item.external_url ? { 
+                            target: "_blank", 
+                            rel: "noopener noreferrer" 
+                        } : {})}
+                    >
+                        <h3> {item.title} </h3>
+                    </Link>
+
+                    <div className="art-summary">
+                        {item.summary}
+                    </div>
+
+                    <div className="art-time">
+                        <i className='bx bx-calendar-alt text-16 text-[#A0A5AC]'></i>
+                        <time> 
+                            { formatArticleTime(time) }
+                        </time>
+
+                        { item.create_by_name && (
+                            <>
+                            <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]"></i>
+                            <span> {item.create_by_name} </span>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

src/components/shared/ProductItem.tsx

@@ -3,13 +3,21 @@ import Link from "next/link";
 import { formatPrice  } from "@/lib/utils";
 import { useProductItem } from "@/hooks/useProductItem"
 import { useCart } from '@/hooks/useCart';
+import { useEffect, useState } from "react";
 
 export default function ProductItem({item}:any){
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);    
+
     const product = useProductItem(item);
-    if (!product) return null;
 
     const { addToCart, isInCart } = useCart();
 
+    if (!mounted || !product) return null;
+
     const {
         productId,
         productUrl,
@@ -123,7 +131,8 @@ export default function ProductItem({item}:any){
                                 </p>
 
                                 <div className="tooltip-spec">
-                                    <div dangerouslySetInnerHTML={{ __html: displaySummary }}/>
+                                    <div suppressHydrationWarning 
+                                         dangerouslySetInnerHTML={{ __html: displaySummary }}/>
                                 </div>
                             </div>
                         }
@@ -136,7 +145,8 @@ export default function ProductItem({item}:any){
                                 </p>
 
                                 <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
-                                    <div dangerouslySetInnerHTML={{ __html: displayOffer }}/>
+                                    <div suppressHydrationWarning 
+                                        dangerouslySetInnerHTML={{ __html: displayOffer }}/>
                                 </div>
                             </div>
                         }