update 14/01

src/components/shared/DealItem.tsx

@@ -0,0 +1,80 @@
+'use client';
+import Link from "next/link";
+import { formatPrice } from "@/lib/utils";
+import { useDealItem } from "@/hooks/useDealItem"
+import { useCart } from '@/hooks/useCart';
+
+
+export default function DealItem( {item} : any) {
+    const deal = useDealItem(item);
+    if (!deal) return null;
+
+    const { addToCart, isInCart } = useCart();
+
+    const {
+        productInfo,
+        price,
+        marketPrice,
+        discount,
+        remain,
+        saleRemainPercent,
+        specialOffer,
+    } = deal;
+
+    const discountView = discount > 0 ? (<>
+                                <del>{formatPrice(marketPrice)} đ</del>
+                                <span className="deal-discount">-{discount}%</span>
+                            </>
+                        ) : null;
+
+    return (
+        <div className="deal-item">
+            <Link href={ productInfo.productUrl } className="deal-img">
+                <img 
+                    src={ productInfo.productImage.large } 
+                    alt={ productInfo.productName } 
+                    width={200} 
+                    height={200}
+                    className="fit-img"
+                />
+            </Link>
+
+            <div className="deal-text">
+                <Link href={ productInfo.productUrl } className="deal-name">
+                    { productInfo.productName }
+                </Link>
+
+                <div className="deal-price-holder">
+                    <div>
+                        <p className="deal-price"> {formatPrice(price)} đ </p>
+
+                        {discountView}
+                    </div>
+
+                    <button className="deal-btn bx bx-plus" type="button" aria-label="Mua"
+                        onClick={() => addToCart(productInfo.id)}
+                        disabled={isInCart(productInfo.id)}    
+                    ></button>
+                </div>
+
+                <div className="deal-count">
+                    <i className="deal-line" style={{ width: saleRemainPercent + '%' }}></i>
+                    <span> Còn: 
+                        {remain}/{item.quantity} 
+                        sản phẩm 
+                    </span>
+                </div>
+
+                {specialOffer && (
+                    <div className="deal-offer">
+                        <span className="text-[#BE1F2D]">Quà tặng: </span>
+
+                        <div
+                            dangerouslySetInnerHTML={{ __html: specialOffer }}
+                        />
+                    </div>
+                )}                
+            </div>
+        </div>
+    )
+}

src/components/shared/FancyboxTrigger.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import React from 'react';
-
-type Props = {
-    target: string;
-    group?: string;
-    children: React.ReactNode;
-    className?: string;
-};
-
-export default function FancyboxTrigger({ 
-    target, 
-    group = 'default',
-    children, 
-    className 
-}: Props) {
-    return (
-        <a
-            href={target}
-            data-fancybox={group}
-            className={className}
-        >
-            {children}
-        </a>
-    );
-}

src/components/shared/ImageItem.tsx

@@ -0,0 +1,18 @@
+'use client';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function ImageComponent({item}:any){
+    return(
+        <Link href={item.desUrl}>
+            <Image 
+                src={item.fileUrl} 
+                alt={item.name} 
+                width={100} 
+                height={100} 
+                className="block w-full"
+                unoptimized
+            />
+        </Link>
+    )
+}

src/components/shared/MenuItem.tsx

@@ -1,41 +0,0 @@
-import Link from "next/link"
-
-export default function MenuItem({item}:any) {
-    const hasChildren = item.children.length > 0
-
-    return (
-        <li className="item" data-id={item.id}>
-            <Link href={item.url} 
-                className={`cat-1 ${hasChildren ? 'has-children' : ''}`}
-            >
-                <i className="lazy cat-thumb" 
-                    style={{ backgroundImage: `url(${item.thumnail})` }}
-                ></i>
-
-                <span className="cat-title"> {item.title} </span>
-            </Link>
-
-            { hasChildren &&
-                <ul className="submenu">
-                    { 
-                        item.children.map( (item_2:any) => (
-                            <li key={item_2.id}>
-                                <Link href={item_2.url} className="blue">
-                                    <span className="font-600"> {item_2.title} </span>
-                                </Link>
-
-                                {item_2.children.length > 0 &&
-                                    item_2.children?.map( (item_3:any) => (
-                                        <Link href={item_3.url} key={item_3.id}>
-                                            <span> {item_3.title} </span>
-                                        </Link>
-                                    ))
-                                }
-                            </li>
-                        ))
-                    }
-                </ul>
-            }
-        </li>
-    )
-}