update 14/01

src/components/home/Category/index.tsx

@@ -1,16 +1,32 @@
+import { categories } from "@/data/categories";
+
 export default function FeaturedProductCategories() {
+    const {all_category} = categories.product;
+
     return (
-        <div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
-            <h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
+        <>
+        {all_category && 
+            <div className="home-categories-container bg-white rounded-[24px] my-10 p-6 pb-8">
+                <h2 className="group-title font-600 text-[28px] text-[#004BA4] mb-5 leading-9"> Danh mục nổi bật </h2>
 
-            <div className="grid grid-cols-10 gap-6">
-                <a href="" className="item">
-                    <i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-3.png)' }}></i>
-                    <span className="block"> PC Thiết Kế Đồ Họa </span>
-                </a>
-
-                <a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-1.png)' }}></i><span className="block">PC Thiết</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-2.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-4.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-5.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-7.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-8.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-9.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-11.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-12.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a><a href="" className="item"><i className="image lazy" style={{ backgroundImage: 'url(images/global/cat-13.png)' }}></i><span className="block">PC Thiết Kế Đồ Họa</span></a>
+                <div className="grid grid-cols-10 gap-6">
+                    {all_category
+                        .filter( (item:any) => item.is_featured === 1 )
+                        .map( (item:any) => 
+                            <a href={item.url} className="item" key={item.id}>
+                                <i className="image lazy" 
+                                    style={{ backgroundImage: `url(${item.thumnail})` }}
+                                ></i>
+                                
+                                <span className="block">
+                                    {item.title}
+                                </span>
+                            </a>
+                        )
+                    }
+                </div>
             </div>
-        </div>
+        }
+        </>
     )
 }

src/components/home/Deal/index.tsx

@@ -1,88 +1,67 @@
 'use client';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import { dealList } from "@/data/deals"
+import DealItem from "@/components/shared/DealItem"
+
+export default function Collection() {
+    
+    const data = dealList.filter(item => item.total > 0) ?? [];
 
-export default function Deal() {
     return (
-        <div className="home-deal-container my-[3rem]">
-            <div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
-                <div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
-                    <div className="flex items-center flex items-center">
-                        <div className="flex items-center">
-                            <i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
-                            <p className="m-0 mr-5 font-600 text-[32px]"> Cấu hình Flash Sale </p>
-                        </div>
-
-                        <div className="deal-time-holder">
-                            <p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
-                        </div>
-                    </div>
-
-                    <a href="/deal" className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i>  </a>
-                </div>
-
-                <div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
-                    <div className="custom-nav hidden">
-                        <div className="button-icon swiper-button-prev"></div>
-                        <div className="button-icon swiper-button-next"></div>
-                    </div>
-
-                    <Swiper
-                        modules={[Navigation, Pagination, Autoplay]}
-                        spaceBetween={24}
-                        slidesPerView={5}
-                        loop={true}
-                        autoplay={{
-                            delay: 3000,
-                            disableOnInteraction: false,
-                        }}
-                        navigation={{
-                            prevEl: '.custom-nav .swiper-button-prev',
-                            nextEl: '.custom-nav .swiper-button-next',
-                        }}
-                        breakpoints={{
-                            1600: {
-                                slidesPerView: 6,
-                            },
-                        }}                        
-                    >
-                        <SwiperSlide>
-                            <div className="deal-item">
-                                <a href="" className="deal-img">
-                                    <img src="images/product-1.jpg" alt="" width="1" height="1" className="fit-img"/>
-                                </a>
-
-                                <div className="deal-text">
-                                    <a href="" className="deal-name"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia </a>
-
-                                    <div className="deal-price-holder">
-                                        <div>
-                                            <p className="deal-price"> 48.990.000 đ </p>
-                                            <del> 52.000.000 đ </del>
-                                            <span className="deal-discount"> -6% </span>
-                                        </div>
-
-                                        <button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button>
-                                    </div>
-
-                                    <div className="deal-count">
-                                        <i className="deal-line" style={{ width: '30%' }}></i>
-                                        <span> Còn: 3/5 sản phẩm </span>
-                                    </div>
-
-                                    <div className="deal-offer">
-                                        <span className="text-[#BE1F2D]"> Quà tặng: </span>
-                                        Màn hình Coolest Maste và chuột không dây Logitech
-                                    </div>
-                                </div>
+        data.map( (item:any) => (
+            <div className="home-deal-container my-[3rem]" key={item.collection_info.id}>
+                <div className="deal-container p-4 pt-6 rounded-[12px]" style={{ backgroundImage: 'url(images/bg-deal-home.png)' }}>
+                    <div className="group-title flex items-center justify-between mb-6 text-white relative z-[1]">
+                        <div className="flex items-center flex items-center">
+                            <div className="flex items-center">
+                                <i className="icon-bolt lazy mr-2" style={{ backgroundImage: 'url(images/icon-bolt.png)' }}></i>
+                                <p className="m-0 mr-5 font-600 text-[32px]"> {item.collection_info.title} </p>
                             </div>
-                        </SwiperSlide>
 
-                        <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-2.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '0%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-3.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '70%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-4.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste và chuột không dây Logitech</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-5.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"><span className="text-[#BE1F2D]">Quà tặng:</span>Màn hình Coolest Maste</div></div></div></SwiperSlide> <SwiperSlide><div className="deal-item"><a href="" className="deal-img"><img src="images/product-6.jpg" alt="" width="1" height="1" className="fit-img" /></a><div className="deal-text"><a href="" className="deal-name">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eveniet reprehenderit, in maiores quaerat soluta mollitia</a><div className="deal-price-holder"><div><p className="deal-price">48.990.000 đ</p><del>52.000.000 đ</del><span className="deal-discount">-6%</span></div><button type="button" className="deal-btn bx bx-plus" aria-label="Mua"></button></div><div className="deal-count"><i className="deal-line" style={{ width: '90%' }}></i><span>Còn: 3/5 sản phẩm</span></div><div className="deal-offer"></div></div></div></SwiperSlide>
-                    </Swiper>
-                    
+                            <div className="deal-time-holder">
+                                <p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
+                            </div>
+                        </div>
+
+                        <a href='/deal' className="text-16 font-600"> Xem tất cả <i className="bx bx-chevron-right align-middle ml-[-2px] mt-[-1px]"></i>  </a>
+                    </div>
+
+                    <div className="group relative z-[1] bg-white rounded-[12px] relative min-h-[450px] px-4 pt-6 pb-8">
+                        <div className="custom-nav hidden">
+                            <div className="button-icon swiper-button-prev"></div>
+                            <div className="button-icon swiper-button-next"></div>
+                        </div>
+
+                        <Swiper
+                            modules={[Navigation, Pagination, Autoplay]}
+                            spaceBetween={24}
+                            slidesPerView={5}
+                            loop={true}
+                            autoplay={{
+                                delay: 3000,
+                                disableOnInteraction: false,
+                            }}
+                            navigation={{
+                                prevEl: '.custom-nav .swiper-button-prev',
+                                nextEl: '.custom-nav .swiper-button-next',
+                            }}
+                            breakpoints={{
+                                1600: {
+                                    slidesPerView: 6,
+                                },
+                            }}                        
+                        >
+                            { item.list.map( (deal:any) => 
+                                <SwiperSlide key={deal.id}>
+                                    <DealItem item={deal} />
+                                </SwiperSlide>
+                            )}
+                        </Swiper>
+                        
+                    </div>
                 </div>
             </div>
-        </div>
+        ))
     )
 }

src/components/home/Slider/ImageList.tsx

@@ -0,0 +1,18 @@
+import ImageItem from '@/components/shared/ImageItem';
+
+type Props = {
+    data?: any[];
+    className?: string;
+};
+
+export default function BannerList({ data = [], className = '' }: Props) {
+    if (!data.length) return null;
+
+    return (
+        <div className={className}>
+            {data.map((item) => (
+                <ImageItem key={item.id} item={item} />
+            ))}
+        </div>
+    );
+}

src/components/home/Slider/index.tsx

@@ -1,8 +1,16 @@
 'use client';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import { banner } from '@/data/banner'
+import ImageItem from '@/components/shared/ImageItem';
+import ImageList from './ImageList';
 
 export default function Slider() {
+    const bannerSlider = banner.homepage['2022_home_slider'] ?? [];
+    const bannerRight  = banner.homepage['2022_home_right_slider'] ?? [];
+    const bannerUnder  = banner.homepage['2022_home_under_slider'] ?? [];
+    const underSlider  = banner.homepage['2022_4_under_slider'] ?? [];
+
     return(
         <div className="home-banner-container mb-10 min-h-[845px]">
             <div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
@@ -19,29 +27,14 @@ export default function Slider() {
                         }}
                         pagination={{ clickable: true }}
                     >
-                        <SwiperSlide>
-                            <a href="">
-                                <img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
-                            </a>
-                        </SwiperSlide>
-
-                        <SwiperSlide>
-                            <a href="">
-                                <img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
-                            </a>
-                        </SwiperSlide>
-
-                        <SwiperSlide>
-                            <a href="">
-                                <img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
-                            </a>
-                        </SwiperSlide>
-
-                        <SwiperSlide>
-                            <a href="">
-                                <img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
-                            </a>
-                        </SwiperSlide>
+                        {
+                            bannerSlider.map((item:any) => 
+                                <SwiperSlide key={item.id}>
+                                    <ImageItem item={item} />
+                                </SwiperSlide>
+                            )
+                        }
+                        
                     </Swiper>
 
                     <div className="custom-nav hidden">
@@ -58,34 +51,22 @@ export default function Slider() {
                     </div>
                 </div>
 
-                <div className="home-banner-right col-span-1">
-                    <a href="" className="last:mb-0 mb-4">
-                        <img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
-                    </a>
+                <ImageList 
+                    data={bannerRight} 
+                    className="home-banner-right col-span-1"
+                />
 
-                    <a href="" className="last:mb-0 mb-4">
-                        <img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
-                    </a>
-                </div>
-
-                <div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
-                    <a href="">
-                        <img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
-                    </a>
-
-                    <a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
-                </div>
+                <ImageList 
+                    data={bannerUnder} 
+                    className="grid grid-cols-3 gap-4 col-span-3"
+                />
             </div>
+            
 
-            <div className="grid grid-cols-4 gap-4 mt-4">
-                <a href="">
-                    <img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
-                </a>
-
-                <a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
-                <a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
-                <a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
-            </div>
+            <ImageList 
+                data={underSlider} 
+                className="grid grid-cols-4 gap-4 mt-4"
+            />
         </div>
     )
 }

src/components/home/index.tsx

@@ -1,10 +1,11 @@
-import Slider from "./Slider";
-import Deal from "./Deal";
-import FeaturedProductCategories from "./Category";
-import ProductCategories from "./Product";
-import Article from "./Article";
+import Slider from "./slider";
+import Deal from "./deal";
+import FeaturedProductCategories from "./category";
+import ProductCategories from "./product";
+import Article from "./article";
 
-export default function Home() {
+export default function HomePage() {
+    
     return(
         <div className="home-page !-mt-5 pt-6">
             <div className="container">

src/components/other/Header/Cart.tsx

@@ -1,21 +1,64 @@
 import Link from "next/link";
+import { useCart } from "@/hooks/useCart";
+import { getAllProducts, formatPrice } from "@/lib/utils"
 
-export default function Cart(){
-    return(
+export default function Cart() {
+
+    const { cartCount, cartIds, loading } = useCart();
+    const allProducts = getAllProducts();
+
+    const productsInCart = allProducts.filter(p => cartIds.includes(p.id) );
+    console.log(productsInCart);
+    
+    return (
         <>
-        <div className="header-cart-item" id="js-header-cart">
-            <Link href="/cart" rel="nofollow" className="flex items-center">
-                <i className="icon-cart relative mr-[10px]">
-                    <b className="js-cart-count cart-count">0</b>
-                </i>
-                <span className="text"> Giỏ <br/>Hàng </span>
-            </Link>
+            <div className="header-cart-item" id="js-header-cart">
+                <Link href="/cart" rel="nofollow" className="flex items-center">
+                    <i className="icon-cart relative mr-[10px]">
+                        <b className="js-cart-count cart-count">{cartCount}</b>
+                    </i>
+                    <span className="text"> Giỏ <br />Hàng </span>
+                </Link>
 
-            <div className="header-cart-hover" id="js-header-cart-holder">
-                <div className="cart-items-holder"><div className="cart-item"><a href="/o-cung-di-dong-ssd-transcend-esd310-1tb" className="cart-img"><img src="https://mygear.io.vn/media/product/75-6728-transcend-esd310-theme.jpg"/></a><div className="cart-text"><a href="/o-cung-di-dong-ssd-transcend-esd310-1tb" className="d-block font-700" style={{ marginBottom: '5px' }}>Ổ Cứng Di Động SSD Transcend ESD310 1TB</a><p className="font-300" style={{ margin: '5px 0' }}> Màu sắc : <b>Màu Đen</b></p><p className="m-0 d-flex justify-content-between"><b>x2</b><b className="red">4.580.000 đ</b></p></div></div><div className="cart-item"><a href="/msi-pro-b860-p-wifi" className="cart-img"><img src="https://mygear.io.vn/media/product/75-7042-pro-b860-p-wifi-1.jpg"/></a><div className="cart-text"><a href="/msi-pro-b860-p-wifi" className="d-block font-700" style={{ marginBottom: '5px' }}>Mainboard MSI PRO B860-P WIFI DDR5</a><p className="m-0 d-flex justify-content-between"><b>x1</b><b className="red">6.190.000 đ</b></p></div></div></div><div className="cart-price-hover"><p className="grey m-0 text-right"> Tổng tiền hàng (<span className="red"><span className="js-cart-count">3</span> sản phẩm</span>): <span className="red text-18 font-600" style={{ verticalAlign: 'top' }}> 10.770.000đ </span></p><a href="/cart" className="d-block text-center text-white btn-goCart"> THANH TOÁN NGAY </a></div>
+                {productsInCart.length > 0 &&
+                    <div className="header-cart-hover">
+                        <div className="cart-items-holder">
+
+                            {productsInCart.map((item:any) =>
+                                <div className="cart-item" key={item.id}>
+                                    <Link href={item.productUrl} className="cart-img">
+                                        <img src={item.productImage.small} alt="image" width={100} height={100} />
+                                    </Link>
+
+                                    <div className="cart-text">
+                                        <Link href={item.productUrl} className="d-block font-700" style={{ marginBottom: "5px" }}>
+                                            {item.productName}
+                                        </Link>
+
+                                        <p className="m-0 d-flex justify-content-between">
+                                            <b>x1</b>
+                                            <b className="red">
+                                                {item.price > 0 ? formatPrice(item.price) +'đ' : 'Liên hệ'} 
+                                            </b>
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+                            
+                            <p className="text-center underline font-600 red" style={{ margin: '0', padding: "10px" }}> 1 số sp không có trong DB tĩnh </p>
+                        </div>
+
+                        <div className="cart-price-hover">
+                            <p className="grey m-0 text-right">
+                                Tổng tiền hàng
+                                (<span className="red"><span className="js-cart-count">{cartCount}</span> sản phẩm</span>):
+                                <span className="red text-18 font-600" style={{ verticalAlign: "top" }}> 10.770.000đ </span>
+                            </p>
+                            <Link href="/cart" className="d-block text-center text-white btn-goCart"> THANH TOÁN NGAY </Link>
+                        </div>
+                    </div>
+                }
             </div>
-        </div>
-        
         </>
     )
 }

src/components/other/Header/index.tsx

@@ -5,7 +5,7 @@ import useFancybox from '@/lib/useFancyBox';
 
 import Link from 'next/link';
 import Logo from "./Logo";
-import Menu from "./Menu";
+import Menu from "@/components/other/menu";
 import Search from "./Search";
 import Cart from "./Cart";
 import Account from "./Account";
@@ -41,17 +41,18 @@ export default function Header() {
 
                     <div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
                         <Menu />
+
                         <Search />
                     </div>
 
                     <div className="header-right-group relative flex items-center justify-between gap-4 w-[420px] text-white leading-[18px] font-500">
-                        <a href="#fancybox-headphone"
+                        <Link href="#fancybox-headphone"
                             data-fancybox="fancybox-hotline"                            
                             className="flex items-center gap-2"
                         >
                             <i className="icons icon-headphone"></i>
                             <span className="text"> Hotline<br/> Mua Hàng </span>
-                        </a>
+                        </Link>
 
                         <Link href="/he-thong-cua-hang" className="flex items-center gap-2">
                             <i className="icons icon-showroom"></i>
@@ -92,14 +93,13 @@ export default function Header() {
                         <span> Bảo Hành Tận Nhà </span>
                     </Link>
 
-                    <a 
-                        href="#fancybox-feedback"
+                    <Link href="#fancybox-feedback"
                         data-fancybox="fancybox-feedback"
                         className="flex items-center gap-2 hover:text-[#0678DB]"
                     >
                         <i className="icons icon-feedback"></i>
                         <span> Feedback </span>
-                    </a>
+                    </Link>
                 </div>
             </div>            
         </div>

src/components/product/Category/index.tsx

@@ -1,10 +1,10 @@
-import ProductFilter from "./Filter";
-import Static from "./Static";
-import FAQ from "./FAQ";
-import Banner from "./Banner";
-import SortByCollection from "./Sort";
-import ProductList from "./Product";
-import Paging from "./Paging";
+import ProductFilter from "./filter";
+import Static from "./static";
+import FAQ from "./faq";
+import Banner from "./banner";
+import SortByCollection from "./sort";
+import ProductList from "./productList";
+import Paging from "./paging";
 
 export default function ProductCategory({ slug }: { slug: string }) {
 

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>
+    )
+}