ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 13/01

Browse Source
This commit is contained in:
Dao Duc
2026-01-13 17:22:12 +07:00
parent da37dc67e7
commit 229bdbde54
23 changed files with 7751 additions and 6309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12391
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -9,6 +9,7 @@
"lint": "eslint"
},
"dependencies": {
"@fancyapps/ui": "5.0",
"next": "16.1.0",
"react": "19.2.3",
"react-dom": "19.2.3",

0
src/app/favicon.ico → public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

125
public/styles/library.css
View File

File diff suppressed because one or more lines are too long

8
src/app/[slug]/page.tsx
View File

@@ -1,6 +1,6 @@
// src/app/[slug]/page.tsx
import { notFound } from "next/navigation";
import { findBySlug } from "@/lib/slugMap";
import { findBySlug } from "@/lib/slug/slugMap";
import ProductCategory from "@/components/product/Category";
import ProductDetail from "@/components/product/ProductDetail";
@@ -21,16 +21,16 @@ export default async function SlugPage({
switch (result.type) {
case "product_category":
return <ProductCategory data={result.data} />;
return <ProductCategory slug={result.data} />;
case "product_detail":
return <ProductDetail data={result.data} />;
return <ProductDetail slug={result.data} />;
case "article_home":
return <ArticleHome slug={slug} />;
case "article_category":
return <ArticleCategory data={result.data} />;
return <ArticleCategory slug={result.data} />;
case "article_detail":
return <ArticleDetail slug={result.data.slug} />;

10
src/components/other/Footer/index.tsx
View File

@@ -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 />

32
src/components/other/Header/Account.tsx
View File

@@ -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>
)

6
src/components/other/Header/Cart.tsx
View File

@@ -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>

6
src/components/other/Header/Logo.tsx
View File

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

12
src/components/other/Header/Menu.tsx
View File

File diff suppressed because one or more lines are too long

127
src/components/other/Header/index.tsx
View File

@@ -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>
</>
)
}
}

27
src/components/shared/FancyboxTrigger.tsx Normal file
View File

@@ -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>
);
}

3
src/components/other/Global/Feedback.tsx → src/components/shared/Feedback.tsx
View File

@@ -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>

0
src/components/other/Global/FixedButtons.tsx → src/components/shared/FixedButtons.tsx
View File

3
src/components/other/Global/Hotline.tsx → src/components/shared/Hotline.tsx
View File

@@ -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>

41
src/components/shared/MenuItem.tsx Normal file
View File

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

1233
src/data/banner.ts Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/lib/resolveArticlePage.ts → src/lib/slug/resolveArticlePage.ts
View File

@@ -1,5 +1,5 @@
// src/lib/articlePage.ts
import { categories } from "../data/categories";
import { categories } from "../../data/categories";
export type ArticleResult =
| { type: "article_home"; data: any }

4
src/lib/resolveProductPage.ts → src/lib/slug/resolveProductPage.ts
View File

@@ -1,6 +1,6 @@
// hoanghapc/src/lib/productPage.ts
import { categories } from "../data/categories";
import { productList } from "../data/product-list";
import { categories } from "../../data/categories";
import { productList } from "../../data/product-list";
export type ProductResult =
| { type: "product_category"; data: any }

0
src/lib/slugMap.ts → src/lib/slug/slugMap.ts
View File

15
src/lib/useFancyBox.ts Normal file
View File

@@ -0,0 +1,15 @@
import { useState, useEffect } from "react";
import { type FancyboxOptions, Fancybox } from "@fancyapps/ui/dist/fancybox/";
export default function useFancybox(options: Partial<FancyboxOptions> = {}) {
const [root, setRoot] = useState<HTMLElement | null>(null);
useEffect(() => {
if (root) {
Fancybox.bind(root, "[data-fancybox]", options);
return () => Fancybox.unbind(root);
}
}, [root, options]);
return [setRoot];
}

9
src/styles/globals.css
View File

@@ -1,10 +1,15 @@
@import url('https://cdn.boxicons.com/fonts/basic/boxicons.min.css');
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
@import "@fancyapps/ui/dist/fancybox/fancybox.css";
@import "tailwindcss";
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import "../../public/styles/library.css";
@import "../../public/styles/tailwind.css";
@import './pc_style.css';
@import './pc_style.css';
.fancybox__dialog .fancybox__container.is-ready {opacity: 1;}

5
src/styles/pc_style.css
View File

@@ -132,8 +132,9 @@ body{min-width:1248px;background:#E8ECF6}
.header-cart-hover .cart-price-hover .btn-goCart{border-radius:5px;margin-top:10px;background:#0676DA;font-weight:700;line-height:42px}
.header-cart-item:hover .header-cart-hover{transition:.2s all;top:101%;opacity:1;visibility:visible}
.header-cart-hover .cart-price-hover p{margin:10px 0 15px!important}
.fancybox-content-container .f-button.is-close-btn{top:15px!important;opacity:1!important;background:transparent}
.fancybox-content-container svg{color:#Fff}
.fancybox-content-container{position: relative;}
.fancybox-content-container .f-button.is-close-btn, .fancybox-content-container .f-button.is-close-button{position: absolute;top:15px!important;opacity:1!important;background:transparent;right: 0; z-index: 1;}
.fancybox-content-container svg{color:#Fff;width: 22px;height: 22px;stroke-width: 2px;}
.fancybox-content-container .hotline-list p{margin:0 0 16px;font-size:16px;line-height:23px;position:relative;padding:0 0 0 28px;display:flex;align-items:center}
.fancybox-content-container .hotline-list p:last-child{margin:0}
.fancybox-content-container .hotline-list p::before{content:"";position:absolute;left:0;background-position:-4px -83px}