tieptk/nguyencongpc_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
tieptk
2025-12-26 10:27:02 +07:00
parent fd9b5a3819
commit 7fc0be90b8
48 changed files with 5818 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/other/Footer/IconFixRight/index.tsx Normal file
View File

@@ -0,0 +1,86 @@
import Link from 'next/link';
import Image from 'next/image';
import { FaFacebookF, FaYoutube, FaAngleUp } from 'react-icons/fa';
import { FaFacebookMessenger } from 'react-icons/fa';
import { SiZalo } from 'react-icons/si';
const IconFixRight: React.FC = () => {
return (
<div className="global-fixed-right">
<Link
href="https://www.facebook.com/NGUYENCONGPC.VN"
aria-label="Face Book"
target="_blank"
className="fix-face flex items-center justify-center"
>
<FaFacebookF size={20} />
</Link>
<Link
href="https://www.youtube.com/c/NGUYENCONGPC"
aria-label="Youtube"
target="_blank"
className="fix-youtube flex items-center justify-center"
>
<FaYoutube size={22} />
</Link>
<Link
href="javascript:window.scrollTo({ top: 0, behavior: 'smooth' });"
className="scroll-top-btn items-center justify-center"
title="Di chuyển lên đầu trang!"
style={{ display: 'none' }}
>
<FaAngleUp size={20} />
</Link>
<Link
href="https://m.me/nguyencongpc.vn"
target="_blank"
className="messenger flex items-center"
>
<Image
src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/facebook_messenger.png"
width="40"
height="40"
alt="mes"
className="lazy"
/>
<div className="contact-info">
<b className="block">Chat Facebook</b>
<span>(8h-22h30)</span>
</div>
</Link>
<Link
href="https://zalo.me/nguyencongpc"
target="_blank"
className="flex items-center"
style={{
background: '#fff',
bottom: '145px',
width: '170px',
padding: '10px',
borderRadius: '15px',
boxShadow: '0 1px 2px 1px #01010133',
color: '#007bff',
fontSize: '14px',
height: '50px',
}}
>
<Image
src="https://nguyencongpc.vn/media/lib/24-01-2024/zalo.png"
width="40"
height="40"
alt="mes"
className="lazy"
style={{ marginRight: '10px' }}
/>
<div className="contact-info">
<b className="block">Chat Zalo</b>
<span>(8h-22h30)</span>
</div>
</Link>
</div>
);
};
export default IconFixRight;

218
src/components/other/Footer/index.tsx Normal file
View File

@@ -0,0 +1,218 @@
import Link from 'next/link';
import Image from 'next/image';
import IconFixRight from './IconFixRight';
const Footer: React.FC = () => {
return (
<>
<footer className="footer-main">
{/* Chính sách */}
<div className="footer-policy">
<div className="container flex items-center justify-between gap-12">
<div className="item flex items-center justify-center">
<i className="sprite sprite-giaohang-footer"></i>
<p className="text box-title-policy m-0">
<b className="block">Chính sách giao hàng</b>
<span className="grey block">nhận hàng và thanh toán tại nhà</span>
</p>
</div>
<div className="item flex items-center justify-center">
<i className="sprite sprite-doitra-footer"></i>
<p className="text box-title-policy m-0">
<b className="block">đổi trả dễ dàng</b>
<span className="grey block">1 đổi 1 trong 15 ngày</span>
</p>
</div>
<div className="item flex items-center justify-center">
<i className="sprite sprite-thanhtoan-footer"></i>
<p className="text box-title-policy m-0">
<b className="block">thanh toán tiện lợi</b>
<span className="grey block">tiền mặt, CK, trả góp 0%</span>
</p>
</div>
<div className="item flex items-center justify-center">
<i className="sprite sprite-hotro-footer"></i>
<p className="text box-title-policy m-0">
<b className="block">hỗ trợ nhiệt tình</b>
<span className="grey block">tư vấn, giải đáp mọi thắc mắc</span>
</p>
</div>
</div>
</div>
{/* Box info */}
<div className="box-info-main">
<div className="justify-content-between footer-list-info-main container flex">
<div className="item-info-main">
<p className="title font-weight-700">Giới thiệu nguyễn công</p>
<Link href="https://nguyencongpc.vn/pages/profile.html" className="text">
Giới thiệu công ty
</Link>
<Link href="/lien-he" className="text">
Thông tin liên hệ
</Link>
<Link href="/tin-tuc" className="text">
Tin tức
</Link>
<Link href="/tuyen-dung" className="text">
Tuyển dụng
</Link>
<Link href="#fancybox-showroom" className="text">
Hệ thống cửa hàng
</Link>
<div className="list-social-footer flex items-center">
<Link
href="https://www.facebook.com/MAY.TINH.NGUYEN.CONG"
className="item-social"
aria-label="Facebook"
>
<i className="sprite sprite-fb-footer"></i>
</Link>
<Link
href="https://www.youtube.com/c/NGUYENCONGPC"
className="item-social"
aria-label="Youtube"
>
<i className="sprite sprite-youtube-fotoer"></i>
</Link>
<a href="javascript:;" className="item-social" aria-label="Instagram">
<i className="sprite sprite-instagram-footer"></i>
</a>
<a href="javascript:;" className="item-social" aria-label="Tiktok">
<i className="sprite sprite-tiktok-footer"></i>
</a>
</div>
<div className="bct-footer flex gap-3">
<Link
href="http://online.gov.vn/Home/WebDetails/47532"
target="_blank"
rel="nofollow"
>
<Image
src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/footer-bct.png"
alt="bộ công thương"
className="lazy"
width={132}
height="1"
/>
</Link>
<Link
href="https://www.dmca.com/compliance/nguyencongpc.vn"
title="DMCA Compliance information for nguyencongpc.vn"
target="_blank"
rel="nofollow"
>
<img
src="https://www.dmca.com/img/dmca-compliant-grayscale.png"
alt="DMCA compliant"
width={115}
height={40}
/>
</Link>
</div>
<div>
<i className="sprite sprite-dmca-footer"></i>
</div>
</div>
<div className="item-info-main">
<p className="title font-weight-700">Hỗ trợ khách hàng</p>
<Link href="/huong-dan-mua-hang-truc-tuyen" className="text">
Hướng dẫn mua hàng trực tuyến
</Link>
<Link href="/pages/chinh-sach-thanh-toan.html" className="text">
Hướng dẫn thanh toán
</Link>
<Link href="/lien-he" className="text">
Gửi yêu cầu bảo hành
</Link>
<Link href="/lien-he" className="text">
Góp ý, Khiếu Nại
</Link>
</div>
<div className="item-info-main">
<p className="title font-weight-700">Chính sách chung</p>
<Link href="/pages/chinh-sach-chung.html" className="text">
Chính sách, quy định chung
</Link>
<Link href="/pages/chinh-sach-van-chuyen.html" className="text">
Chính sách vận chuyển
</Link>
<Link href="/pages/chinh-sach-bao-hanh.html" className="text">
Chính sách bảo hành
</Link>
<Link href="/pages/dich-vu-tinh-phi.html" className="text">
Dịch vụ tính phí
</Link>
<Link href="/chinh-sach-nhap-lai" className="text">
Chính sách nhập lại tính phí
</Link>
<Link href="/pages/chinh-sach-doanh-nghiep.html" className="text">
Chính sách cho doanh nghiệp
</Link>
<Link href="/bao-mat-thong-tin-khach-hang" className="text">
Bảo mật thông tin khách hàng
</Link>
</div>
<div className="item-info-main">
<p className="title font-weight-700">Thông tin khuyến mại</p>
<Link href="https://khuyenmai.nguyencongpc.vn" className="text">
Thông tin khuyến mại
</Link>
<Link href="/san-pham-xa-hang" className="text">
Sản phẩm khuyến mại
</Link>
<Link href="/san-pham-ban-chay" className="text">
Sản phẩm bán chạy
</Link>
<Link href="/san-pham-moi" className="text">
Sản phẩm mới
</Link>
</div>
</div>
{/* Footer bottom */}
<div className="footer-bottom">
<div className="container">
<div className="copyright">
<p>WEBSITE ĐƯỢC SỞ HỮU VÀ QUẢN LÝ BỞI NGUYỄN VIẾT CÔNG</p>
<b>CÔNG TY TNHH MÁY TÍNH NGUYỄN CÔNG</b>
<p>Địa chỉ: 17 Hà Kế Tấn - Phường Phương Liệt - Hà Nội</p>
<p>Mã số thuế: 0107568451 do Sở Kế Hoạch và Đầu Tư TP.Hà Nội (17/09/2016)</p>
<p>
Mua hàng: <Link href="tel:0866666166">089.9999.191</Link> -{' '}
<a href="tel:0812666665">0812.666.665</a>
</p>
<p className="list-contact-footer flex items-center">
<span>
GÓP Ý : <Link href="tel:0979999191">097.9999.191</Link> -{' '}
<a href="tel:0983333388">098.33333.88</a>.
</span>
<span>
Email: <Link href="mailto:info@nguyencongpc.vn">info@nguyencongpc.vn</Link>.
</span>
<span>
Website: <Link href="/">nguyencongpc.vn</Link>.
</span>
<span>
Fanpage:{' '}
<a href="https://www.facebook.com/MAY.TINH.NGUYEN.CONG">
facebook.com/MAY.TINH.NGUYEN.CONG
</a>
.
</span>
</p>
</div>
</div>
</div>
</div>
</footer>
<IconFixRight />
</>
);
};
export default Footer;

112
src/components/other/Header/HeaderBottom/HeaderBottomRight.tsx Normal file
View File

@@ -0,0 +1,112 @@
'use client';
import React from 'react';
import { menuData } from '../menuData'; // Đảm bảo file này export menuData
import Link from 'next/link';
import { FaCaretDown } from 'react-icons/fa';
const HeaderBottomRight: React.FC = () => {
// 1. Lọc các ID danh mục hiển thị trên Header (Cấp 1)
const allowedIds = ['407', '408', '3300', '281', '3431', '410', '3403'];
// 2. Hàm lấy Icon và Title dựa theo ID
const getCategoryInfo = (id: string) => {
switch (id) {
case '407':
return { icon: 'sprite-laptop', title: 'Laptop' };
case '408':
return { icon: 'sprite-PC', title: 'PC' };
case '3300':
return { icon: 'sprite-PC', title: 'PC AI' };
case '281':
return { icon: 'sprite-manhinh', title: 'Màn hình' };
case '3431':
return { icon: 'sprite-linhkien', title: 'Linh kiện PC' };
case '410':
return { icon: 'sprite-phimchuot', title: 'Phím chuột ghế gear' };
case '3403':
return { icon: 'sprite-thietbi', title: 'Thiết bị văn phòng' };
default:
return { icon: '', title: '' };
}
};
// Lấy danh sách all_category từ menuData[0]
const allCategories = menuData[0]?.product?.all_category || [];
return (
<>
{allCategories.map((item) => {
if (!allowedIds.includes(item.id)) return null;
const info = getCategoryInfo(item.id);
return (
<li key={item.id} className="item-category-header" data-id={item.id}>
<Link href={item.id === '408' ? '#' : item.url} className="flex items-center gap-2">
<i className={`sprite-more ${info.icon}`}></i>
<span className="title-header-bottom">{info.title}</span>
<FaCaretDown size="16" className="text-white" />
</Link>
<div className="list-category-child flex justify-between">
<div className="box-left">
<ul className="grid grid-cols-4 gap-5">
{item.isParent === '1' && (
<>
{item.id === '408'
? allCategories
.filter((c) => ['408', '3201', '1829', '3300', '3691'].includes(c.id))
.map((child1) => (
<li key={child1.id} className="sub-menu">
<Link href={child1.url} className="child-lv2 block font-bold">
{child1.title}
</Link>
{child1.isParent === '1' && (
<div className="list-child-lv3 mt-10 flex flex-col">
{child1.children?.map((child2) => (
<Link key={child2.id} href={child2.url} className="child-lv3">
{child2.title}
</Link>
))}
</div>
)}
</li>
))
: item.children?.map((_item_child) => (
<li key={_item_child.id} className="sub-menu">
<Link href={_item_child.url} className="child-lv2 block font-bold">
{_item_child.title}
</Link>
{_item_child.isParent === '1' && (
<div className="list-child-lv3 mt-10 flex flex-col">
{_item_child.children?.map((_item_childtwo) => (
<Link
key={_item_childtwo.id}
href={_item_childtwo.url}
className="child-lv3"
>
{_item_childtwo.title}
</Link>
))}
</div>
)}
</li>
))}
</>
)}
</ul>
</div>
<div className={`box-right flex-1 product-category-${item.id}`}>
<p className="title font-bold">Bán chạy nhất</p>
<div className="list-product-bestsale" id={`product-category-${item.id}`}></div>
</div>
</div>
</li>
);
})}
</>
);
};
export default HeaderBottomRight;

68
src/components/other/Header/HeaderBottom/index.tsx Normal file
View File

@@ -0,0 +1,68 @@
'use client';
import React, { useState } from 'react';
import { FaBars } from 'react-icons/fa';
import { menuData } from '../menuData';
import Image from 'next/image';
import Link from 'next/link';
import HeaderBottomRight from './HeaderBottomRight';
const HeaderBottom: React.FC = () => {
return (
<>
<div className="header-bottom">
<div className="container flex">
<div className="global-menu-container">
<div className="group-title flex items-center justify-center gap-2">
<FaBars size="16" /> <span className="text-[13px]">Danh mục sản phẩm</span>
</div>
<div className="global-menu-holder">
{menuData[0].product.all_category.map((item) => (
<div key={item.id} className="item">
<Link href={item.url} className="cat-1">
<Image
src={item.thumnail}
className="lazy icon-menu entered"
alt={item.title}
width="1"
height="1"
/>
<span className="cat-title line-clamp-1">{item.title}</span>
</Link>
{/* Cấp 2 & Cấp 3 */}
{item.children && item.children.length > 0 && (
<div className="sub-menu-list">
{item.children.map((_children2) => (
<div className="sub-cat-2" key={_children2.id}>
<Link href={_children2.url} className="cat-2">
{_children2.title}
</Link>
{/* Cấp 3 */}
{_children2.children && _children2.children.length > 0 && (
<>
{_children2.children.map((_children3) => (
<Link key={_children3.id} href={_children3.url}>
{_children3.title}
</Link>
))}
</>
)}
</div>
))}
</div>
)}
</div>
))}
</div>
</div>
<ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-5">
<HeaderBottomRight />
</ul>
</div>
</div>
</>
);
};
export default HeaderBottom;

132
src/components/other/Header/HeaderMid/index.tsx Normal file
View File

@@ -0,0 +1,132 @@
'use client';
import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { FaMapMarkerAlt, FaBars } from 'react-icons/fa';
import BoxShowroom from '@components/common/BoxShowroom';
const HeaderMid: React.FC = () => {
const PopupAddress = () => {
const modal = document.getElementById('boxShowroom') as HTMLDialogElement;
modal?.showModal();
};
return (
<div className="header-middle">
<div className="container flex items-center justify-between">
<div className="header-middle-left flex items-center">
<Link href="/">
<Image
src="https://nguyencongpc.vn/media/lib/18-02-2025/logowhite-dfvefb.png"
width="170"
height="38"
alt="logo"
className="logo-header"
/>
</Link>
<button className="icon-showroom flex items-center justify-center" onClick={PopupAddress}>
<FaMapMarkerAlt size={16} />
</button>
</div>
<div className="header-middle-right flex items-center">
<div className="header-menu-category">
<div className="box-title flex items-center justify-center gap-8">
<FaBars size={16} />
<p className="title-menu font-weight-500">Danh mục sản phẩm</p>
</div>
<div className="cau-noi"></div>
</div>
<div className="header-search-group">
<form method="get" action="/tim" name="searchForm">
<div className="box-search-input">
<input
type="text"
id="js-search-box"
name="q"
className="form-group-input"
placeholder="Bạn cần tìm gì?"
/>
</div>
<button
type="submit"
id="js-search-button"
aria-label="submit-search"
className="search-btn-header"
>
<i className="sprite sprite-search-header icon-search"></i>
</button>
</form>
<div className="search-results">
<div className="search-results-list"></div>
</div>
</div>
<div className="box-tabs-header flex items-center">
<Link href="/buildpc" className="item-tab-header flex-column flex items-center gap-4">
<p className="icon-item-tab flex items-center justify-center">
<i className="sprite sprite-buildpc-header"></i>
</p>
<span className="font-500">Xây dựng cấu hình</span>
</Link>
<Link
href="javascript:void(0)"
className="item-tab-header flex-column flex items-center gap-4"
>
<p className="icon-item-tab flex items-center justify-center">
<i className="sprite sprite-lienhe-header"></i>
</p>
<span className="font-500">Khách hàng liên hệ</span>
</Link>
<Link href="/tin-tuc" className="item-tab-header flex-column flex items-center gap-4">
<p className="icon-item-tab flex items-center justify-center">
<i className="sprite sprite-article-header"></i>
</p>
<span className="font-weight-500">Tin tức công nghệ</span>
</Link>
<div id="js-header-cart" className="position-relative">
<Link href="/cart" className="item-tab-header flex-column flex items-center gap-4">
<p className="icon-item-tab icon-cart-header flex items-center justify-center">
<i className="sprite sprite-cart-header"></i>
<u className="cart-count header-features-cart-amount">1</u>
</p>
<span className="font-weight-500">Giỏ hàng</span>
</Link>
<div className="cau-noi"></div>
<div className="cart-ttip" id="js-cart-tooltip">
<div className="cart-ttip-item-container"></div>
<div className="cart-ttip-price justify-content-end flex items-center gap-6">
<p>Tổng tiền hàng</p>
<p id="js-header-cart-quantity" className="font-weight-500"></p>
<p id="js-header-cart-total-price" className="font-weight-700"></p>
</div>
<Link
href="/cart"
className="cart-ttip-price-button flex items-center justify-center"
>
<p className="font-weight-700">THANH TOÁN NGAY </p>
</Link>
</div>
</div>
<Link
href="/taikhoan"
className="user-header item-tab-header flex-column flex items-center gap-4"
>
<p className="icon-item-tab flex items-center justify-center">
<i className="sprite sprite-account-header"></i>
</p>
<span className="font-weight-500">Tài khoản</span>
</Link>
</div>
</div>
</div>
<BoxShowroom />
</div>
);
};
export default HeaderMid;

63
src/components/other/Header/HeaderTop/index.tsx Normal file
View File

@@ -0,0 +1,63 @@
'use client';
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import Image from 'next/image';
import Link from 'next/link';
// Định nghĩa kiểu dữ liệu cho mỗi Banner
interface BannerItem {
id: number;
link: string;
imageSrc: string;
altText: string;
}
// Dữ liệu mẫu (Bạn có thể fetch từ API)
const BANNER_DATA: BannerItem[] = [
{
id: 429,
link: '/ad.php?id=429',
imageSrc: 'https://nguyencongpc.vn/media/banner/01_Decc0f3e158e61fabaf09a74d48e1c357bd.webp',
altText: 'banner 1',
},
{
id: 392,
link: '/ad.php?id=392',
imageSrc: 'https://nguyencongpc.vn/media/banner/01_Dec383fdcbc6361363bd6d14f05d2c88ee2.webp',
altText: 'banner 2',
},
];
const HeaderSlider: React.FC = () => {
return (
<div className="header-top">
<Swiper
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={1}
loop={true}
className="mySwiper"
>
{BANNER_DATA.map((banner) => (
<SwiperSlide key={banner.id}>
<div className="item">
<Link href={banner.link} className="item-banner boder-radius-10">
<Image
src={banner.imageSrc}
width={1909}
height={57}
alt={banner.altText}
priority={true}
className="h-auto w-full object-cover"
/>
</Link>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
);
};
export default HeaderSlider;

15
src/components/other/Header/index.tsx Normal file
View File

@@ -0,0 +1,15 @@
import HeaderSlider from './HeaderTop';
import HeaderMid from './HeaderMid';
import HeaderBottom from './HeaderBottom';
const Header: React.FC = () => {
return (
<div className="header">
<HeaderSlider />
<HeaderMid />
<HeaderBottom />
</div>
);
};
export default Header;

5383
src/components/other/Header/menuData.ts Normal file
View File

File diff suppressed because it is too large Load Diff