update 13/01

src/components/other/Footer/index.tsx

@@ -1,9 +1,9 @@
 import Showroom from './Showroom';
 import PageInfo from './Info';
 import Newsletter from './Newsletter';
-import Hotline from '../Global/Hotline';
-import FeedBack from '../Global/Feedback';
-import FixedButtons from '../Global/FixedButtons';
+import FixedButtons from '../../shared/FixedButtons';
+import Hotline from '../../shared/Hotline';
+import FeedBack from '../../shared/Feedback';
 
 export default function Footer() {
     
@@ -15,8 +15,8 @@ export default function Footer() {
 
         <PageInfo />
 
-        <FixedButtons />
-
+        <FixedButtons />        
+        
         <FeedBack />
 
         <Hotline />

src/components/other/Header/Account.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 export default function Account(){
     return (
         <div className="header-account bg-[#003ED0] rounded-[30px] group">
@@ -7,40 +9,40 @@ export default function Account(){
             </button>
             
             <div className="bg-white text-[#000] text-16 leading-6 absolute top-[150%] right-0 whitespace-nowrap min-w-[220px] overflow-hidden rounded-md shadow-[0px_4px_10px_0px_#0000001a]  transition-all duration-200 z-[-1] invisible opacity-0 group-hover:opacity-100 group-hover:visible group-hover:z-[9] group-hover:top-[100%] group-hover:visible">
-                <a href="javascript:void(0)" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                <Link href="/dang-ky" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white w-full text-left">
                     <i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Đăng ký</span>
-                </a>
+                </Link>
 
-                <a href="javascript:void(0)" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                <Link href="/dang-nhap" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white w-full text-left">
                     <i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Đăng nhập</span>
-                </a>
+                </Link>
 
-                <a href="/taikhoan?view=change-info" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                <Link href="/taikhoan?view=change-info" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
                     <i className="bx bx-user w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Thông tin tài khoản</span>
-                </a>
+                </Link>
 
-                <a href="/taikhoan?view=order" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                <Link href="/taikhoan?view=order" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
                     <i className="bx bx-list-ul-square w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Danh sách đơn hàng</span>
-                </a>
-                
-                <a href="/san-pham-da-xem" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                </Link>
+
+                <Link href="/san-pham-da-xem" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
                     <i className="bx bx-eye w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Sản phẩm đã xem</span>
-                </a>
+                </Link>
 
-                <a href="/taikhoan?view=change-pass" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                <Link href="/taikhoan?view=change-pass" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
                     <i className="bx bx-lock w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Thay đổi mật khẩu</span>
-                </a>
+                </Link>
 
-                <a href="/logout.php" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
+                <Link href="/logout.php" className="flex items-center px-3 py-3 transition-all duration-100 hover:bg-[#0676DA] hover:text-white">
                     <i className="bx bx-arrow-out-right-square-half w-5 h-5 text-center mr-2 text-20"></i>
                     <span>Thoát tài khoản</span>
-                </a>
+                </Link>
             </div>
         </div>
     )

src/components/other/Header/Cart.tsx

@@ -1,13 +1,15 @@
+import Link from "next/link";
+
 export default function Cart(){
     return(
         <>
         <div className="header-cart-item" id="js-header-cart">
-            <a href="/cart" rel="nofollow" className="flex items-center">
+            <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>
-            </a>
+            </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>

src/components/other/Header/Logo.tsx

@@ -1,7 +1,9 @@
+import Link from "next/link";
+
 export default function Logo(){
     return(
-        <a href="/">
+        <Link href="/">
             <img src="/images/logo.png" alt="logo" width={1} height={1} className="block w-auto max-h-[56px]" />
-        </a>
+        </Link>
     )
 }

src/components/other/Header/index.tsx

@@ -1,93 +1,108 @@
 'use client';
 import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation'
+import useFancybox from '@/lib/useFancyBox';
+
+import Link from 'next/link';
 import Logo from "./Logo";
 import Menu from "./Menu";
 import Search from "./Search";
 import Cart from "./Cart";
 import Account from "./Account";
-import { usePathname } from 'next/navigation'
 
 export default function Header() {
     const pathname = usePathname()
     const isHome = pathname === '/';
-
     const [isSticky, setIsSticky] = useState(false);
 
+    const [fancyboxRef] = useFancybox({});
+
     useEffect(() => {
         const scrollTop = isHome ? 800 : 400;
         const onScroll = () => {
             setIsSticky(window.scrollY > scrollTop);
         };
-
         window.addEventListener('scroll', onScroll);
-        return () => window.removeEventListener('scroll', onScroll);
-    }, []);
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+        };
+    }, [isHome]);
+    
 
     return (
         <>
-        <div className={`global-header-container py-5 ${isSticky ? 'is-fixed' : ''} ${isHome && !isSticky ? 'header-homepage' : ''}`}>
-            <div className="container flex items-center justify-between gap-5 relative">
-                <div className="header-left-group w-[205px]">
-                    <Logo />
-                </div>
+        <div ref={fancyboxRef}>
+            <div className={`global-header-container py-5 ${isSticky ? 'is-fixed' : ''} ${isHome && !isSticky ? 'header-homepage' : ''}`}>
+                <div className="container flex items-center justify-between gap-5 relative">
+                    <div className="header-left-group w-[205px]">
+                        <Logo />
+                    </div>
 
-                <div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
-                    <Menu />
+                    <div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
+                        <Menu />
+                        <Search />
+                    </div>
 
-                    <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"
+                            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>
 
-                <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" className="flex items-center gap-2" data-fancybox>
-                        <i className="icons icon-headphone"></i>
-                        <span className="text"> Hotline<br/> Mua Hàng </span>
-                    </a>
+                        <Link href="/he-thong-cua-hang" className="flex items-center gap-2">
+                            <i className="icons icon-showroom"></i>
+                            <span className="text"> Hệ thống<br/> Showroom </span>
+                        </Link>
 
-                    <a href="/he-thong-cua-hang" className="flex items-center gap-2">
-                        <i className="icons icon-showroom"></i>
-                        <span className="text"> Hệ thống<br/> Showroom </span>
-                    </a>
-
-                    <Cart />
-
-                    <Account />
+                        <Cart />
+                        
+                        <Account />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div className="bg-white shadow-[0px_4px_20px_0px_#004AA11A] text-16 font-500 mb-5">
-            <div className="container flex items-center justify-between leading-[20px] py-[17px]">
-                <a href="/buildpc" className="flex items-center gap-2 hover:text-[#0678DB]">
-                    <i className="icons icon-buildpc"></i>
-                    <span> Xây Dựng Cấu Hình </span>
-                </a>
+            <div className="bg-white shadow-[0px_4px_20px_0px_#004AA11A] text-16 font-500 mb-5">
+                <div className="container flex items-center justify-between leading-[20px] py-[17px]">
+                    <Link href="/buildpc" className="flex items-center gap-2 hover:text-[#0678DB]">
+                        <i className="icons icon-buildpc"></i>
+                        <span> Xây Dựng Cấu Hình </span>
+                    </Link>
 
-                <a href="/designer-tool" className="flex items-center gap-2 hover:text-[#0678DB]">
-                    <i className="icons icon-tool"></i>
-                    <span> PC Đồ Họa Tool </span>
-                </a>
+                    <Link href="/designer-tool" className="flex items-center gap-2 hover:text-[#0678DB]">
+                        <i className="icons icon-tool"></i>
+                        <span> PC Đồ Họa Tool </span>
+                    </Link>
 
-                <a href="/tin-khuyen-mai" className="flex items-center gap-2 hover:text-[#0678DB]">
-                    <i className="icons icon-promotion"></i>
-                    <span> Chương Trình Khuyến Mãi </span>
-                </a>
+                    <Link href="/tin-khuyen-mai" className="flex items-center gap-2 hover:text-[#0678DB]">
+                        <i className="icons icon-promotion"></i>
+                        <span> Chương Trình Khuyến Mãi </span>
+                    </Link>
 
-                <a href="/tin-tuc" className="flex items-center gap-2 hover:text-[#0678DB]">
-                    <i className="icons icon-news"></i>
-                    <span> Tin Tức Công Nghệ </span>
-                </a>
+                    <Link href="/tin-tuc" className="flex items-center gap-2 hover:text-[#0678DB]">
+                        <i className="icons icon-news"></i>
+                        <span> Tin Tức Công Nghệ </span>
+                    </Link>
 
-                <a href="/chinh-sach-bao-hanh" className="flex items-center gap-2 hover:text-[#0678DB]">
-                    <i className="icons icon-warranty"></i>
-                    <span> Bảo Hành Tận Nhà </span>
-                </a>
+                    <Link href="/chinh-sach-bao-hanh" className="flex items-center gap-2 hover:text-[#0678DB]">
+                        <i className="icons icon-warranty"></i>
+                        <span> Bảo Hành Tận Nhà </span>
+                    </Link>
 
-                <a href="#fancybox-feedback" data-fancybox="" className="flex items-center gap-2 hover:text-[#0678DB]">
-                    <i className="icons icon-feedback"></i>
-                    <span> Feedback </span>
-                </a>
-            </div>
+                    <a 
+                        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>
+                </div>
+            </div>            
         </div>
         </>
     )
-}
+}

src/components/shared/FancyboxTrigger.tsx

@@ -0,0 +1,27 @@
+'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/Feedback.tsx

@@ -1,6 +1,7 @@
 export default function FeedBack(){
     return(
-        <div id="fancybox-feedback" className="fancybox-content-container max-w-[800px] w-full text-16 leading-6 hidden !p-0 !bg-transparent">
+        <div id="fancybox-feedback" style={{ display: 'none' }} 
+            className="fancybox-content-container max-w-[800px] text-[#000] w-full text-16 leading-6 !p-0 !bg-transparent">
             <div className="bg-white overflow-hidden rounded-[12px]">
                 <div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
                     <p className="m-0"> Chúng tôi luôn lắng nghe mọi ý kiến đóng góp từ Quý khách </p>

src/components/shared/Hotline.tsx

@@ -1,6 +1,7 @@
 export default function Hotline() {
     return (
-        <div id="fancybox-headphone" className="fancybox-content-container max-w-[720px] w-full text-16 leading-6 hidden !p-0 !bg-transparent">
+        <div id="fancybox-headphone" style={{ display: 'none' }} 
+            className="fancybox-content-container max-w-[720px] text-[#000] w-full text-16 leading-6 !p-0 !bg-transparent">
             <div className="bg-white overflow-hidden rounded-[12px]">
                 <div className="text-center bg-[#0676DA] uppercase font-500 text-20 p-5 relative text-white">
                     <p className="m-0"> Liên hệ hotline để nhận được tư vấn tốt nhất </p>

src/components/shared/MenuItem.tsx

@@ -0,0 +1,41 @@
+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>
+    )
+}