This commit is contained in:
2025-12-22 17:30:27 +07:00
parent 82b718bea2
commit 194de99b62
20 changed files with 2706 additions and 47 deletions

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"prettier.useTabs": false
}

33
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "nguyencongpc",
"version": "0.1.0",
"dependencies": {
"@tippyjs/react": "^4.2.6",
"next": "16.0.10",
"postcss": "^8.5.6",
"react": "19.2.1",
@@ -1234,6 +1235,16 @@
"node": ">=12.4.0"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@rtsao/scc": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1521,6 +1532,19 @@
"tailwindcss": "4.1.18"
}
},
"node_modules/@tippyjs/react": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
"integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
"license": "MIT",
"dependencies": {
"tippy.js": "^6.3.1"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@tybys/wasm-util": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -6253,6 +6277,15 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/tippy.js": {
"version": "6.3.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
"integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
"license": "MIT",
"dependencies": {
"@popperjs/core": "^2.9.0"
}
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

View File

@@ -9,6 +9,7 @@
"lint": "eslint"
},
"dependencies": {
"@tippyjs/react": "^4.2.6",
"next": "16.0.10",
"postcss": "^8.5.6",
"react": "19.2.1",

View File

@@ -7,7 +7,7 @@ import 'swiper/css/pagination';
import '@styles/globals.css';
import Header from '@components/layout/Header';
import PreLoader from '@components/Common/PreLoader';
import PreLoader from '@components/common/PreLoader';
export default function RootLayout({
children,

View File

@@ -1,38 +1,46 @@
const BoxShowroom: React.FC = () => {
return(
<>
<dialog id="boxShowroom" className="modal">
<div className="modal-box">
<form method="dialog">
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"></button>
</form>
<div className="popup-showrom-container d-block">
<p className="group-title">HỆ THỐNG SHOWROOM</p>
<div className="flex flex-wrap justify-between">
return (
<>
<dialog id="boxShowroom" className="modal">
<div className="modal-box">
<form method="dialog">
<button className="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"></button>
</form>
<div className="popup-showrom-container d-block">
<p className="group-title">HỆ THỐNG SHOWROOM</p>
<div className="flex flex-wrap justify-between">
<div className="item">
<p className="item-title">1. Nội</p>
<p>17 Kế Tấn, Phường Phương Liệt, Nội.</p>
<p>
Giờ làm việc: <b>08:30 - 20:30</b>
</p>
<div
className="map-holder js-map-holder"
data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3132.222076725264!2d105.83522224518104!3d20.998217116862435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ac7b37915991%3A0xe20876d091ded6bc!2zMTcgUC4gSMOgIEvhur8gVOG6pW4sIFBoxrDGoW5nIExp4buHdCwgVGhhbmggWHXDom4sIEjDoCBO4buZaSwgVmnhu4d0IE5hbQ!5e0!3m2!1svi!2s!4v1720509407173!5m2!1svi!2s"
></div>
</div>
<div className="item">
<p className="item-title">1. Hà Nội</p>
<p>17 Kế Tấn, Phường Phương Liệt, Nội.</p>
<p>Giờ làm việc: <b>08:30 - 20:30</b></p>
<div className="map-holder js-map-holder" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3132.222076725264!2d105.83522224518104!3d20.998217116862435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ac7b37915991%3A0xe20876d091ded6bc!2zMTcgUC4gSMOgIEvhur8gVOG6pW4sIFBoxrDGoW5nIExp4buHdCwgVGhhbmggWHXDom4sIEjDoCBO4buZaSwgVmnhu4d0IE5hbQ!5e0!3m2!1svi!2s!4v1720509407173!5m2!1svi!2s"></div>
</div>
<div className="item">
<p className="item-title">2. Hồ Chí Minh</p>
<p>249 Thường Kiệt, Phường Phú Thọ, TP. Hồ Chí Minh</p>
<p>Giờ làm việc: <b>08:30 - 20:30</b></p>
<div className="map-holder js-map-holder" data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15678.56730501209!2d106.66439700000001!3d10.762063!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x85a7fc3a74bcd7fd!2zTcOheSBUw61uaCBOZ3V54buFbiBDw7RuZyAxNzYgVMOibiBQaMaw4bubYw!5e0!3m2!1svi!2sus!4v1658936898247!5m2!1svi!2sus"></div>
</div>
</div>
</div>
</div>
<label className="modal-backdrop" htmlFor="my_modal_7">Close</label>
</dialog>
</>
)
}
<div className="item">
<p className="item-title">2. H Chí Minh</p>
<p>249 Thường Kiệt, Phường Phú Thọ, TP. Hồ Chí Minh</p>
<p>
Giờ làm việc: <b>08:30 - 20:30</b>
</p>
<div
className="map-holder js-map-holder"
data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15678.56730501209!2d106.66439700000001!3d10.762063!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x85a7fc3a74bcd7fd!2zTcOheSBUw61uaCBOZ3V54buFbiBDw7RuZyAxNzYgVMOibiBQaMaw4bubYw!5e0!3m2!1svi!2sus!4v1658936898247!5m2!1svi!2sus"
></div>
</div>
</div>
</div>
</div>
<label className="modal-backdrop" htmlFor="my_modal_7">
Close
</label>
</dialog>
</>
);
};
export default BoxShowroom;

View File

@@ -703,7 +703,7 @@ export const menuData: MenuTypes = [
"big_image": "https://nguyencongpc.vn\/media\/category\/cat_big_3638_1696996039.png",
"isParent": "0",
"url": "\/rtx-4070",
"is_featured": "1",
"is_featured": "0",
"summary": "<p> <\/p>\r\n<div id=\"eJOY__extension_root\" class=\"eJOY__extension_root_class\" style=\"all: unset;\"> <\/div>",
"children": []
},

View File

@@ -0,0 +1,83 @@
import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import { Product } from '@/types/TypeListProduct';
import Image from 'next/image';
import Link from 'next/link';
type ProductItemProps = {
item: Product;
};
const formatCurrency = (value: number | string) => {
const num = typeof value === 'string' ? parseInt(value) : value;
return num.toLocaleString('vi-VN');
};
const ItemProduct: React.FC<ProductItemProps> = ({ item }) => {
const offers = item.specialOffer?.all ?? [];
return (
<div className="product-item js-p-item">
<a href={item.productUrl} className="product-image relative">
{item.productImage.large ? (
<Image src={item.productImage.large} width="203" height="203" alt={item.productName} />
) : (
<Image src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/not-image.png" alt={item.productName} />
)}
<span className="p-type-holder">
{item.productType.isHot === 1 && (
<i className="p-icon-type p-icon-hot"></i>
)}
{item.productType.isNew === 1 && (
<i className="p-icon-type p-icon-new"></i>
)}
</span>
<span className="p-type-holder p-type-holder-2">
{item.productType.isBestSale === 1 && (
<i className="p-icon-type p-icon-best-sale"></i>
)}
</span>
</a>
<div className="product-info">
<Link href={item.productUrl}>
<h3 className="product-title line-clamp-3">{item.productName}</h3>
</Link>
{item.marketPrice > 0 ? (
<div className="product-martket-main flex items-center">
<p className="product-market-price">
{item.marketPrice.toLocaleString()}<u>đ</u>
</p>
<div className="product-percent-price">-{Math.round(item.price_off)} %</div>
</div>
) : (
<div className="product-martket-main flex items-center">
</div>
)}
<div className="product-price-main font-[600]">
{item.price > '0'
? `${formatCurrency(item.price)}đ`
: 'Liên hệ'}
</div>
{item.specialOffer?.all?.length ? (
<div className="product-offer line-clamp-2"
dangerouslySetInnerHTML={{
__html: item.specialOffer!.all![0].title,
}} />
) : (
<div className="product-offer line-clamp-2"></div>
)}
{item.extend?.buy_count ? (
<div style={{ height: 18 }}> <b>Đã bán: </b> <span>{item.extend.buy_count}</span> </div>
) : (
<div style={{ height: 18, display: 'block' }}> </div> )}
</div>
</div>
);
};
export default ItemProduct;

View File

@@ -0,0 +1,56 @@
'use client';
import React from 'react';
import Link from 'next/link';
import { FaCaretDown } from 'react-icons/fa';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import ItemProduct from './ItemProduct'
import { Category } from '../../../../types/Menu';
import { menuData } from '../../Header/menuData';
import {productData} from './productData'
const BoxListCategory: React.FC = () => {
return (
<>
{menuData[0].product.all_category.map((item,index) => (
<div className="box-product-category boder-radius-10" key={index}>
<div className="flex items-center justify-between">
<div className="title">
<h2 className="title-box font-[600]">{item.title}</h2>
</div>
<div className="list-category-child flex items-center justify-end flex-1">
{item.children.slice(0, 4).map((item2,index2) => (
<Link key={index2} href={item2.url} className="title-category">{item2.title}</Link>
))}
<Link href={item.url} className="title-all-category flex items-center gap-2">
<span>Xem tất cả </span>
<FaCaretDown size={16} /></Link>
</div>
</div>
<div className="box-list-item-category swiper-product-category">
<Swiper
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={5}
loop={true}
navigation={true}
>
{productData.map((item,index) => (
<SwiperSlide key={index}>
<ItemProduct item={item} />
</SwiperSlide>
))}
</Swiper>
</div>
</div>
))}
</>
)
}
export default BoxListCategory

File diff suppressed because it is too large Load Diff

View File

@@ -1 +1,101 @@
const ProductItem = ({ item }: { item: Product }) => {};
import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import { DealType } from '@/types/TypeListProductDeal';
type ProductItemProps = {
item: DealType;
};
const formatCurrency = (value: number | string) => {
const num = typeof value === 'string' ? parseInt(value) : value;
return num.toLocaleString('vi-VN');
};
const ProductItem: React.FC<ProductItemProps> = ({ item }) => {
const { product_info } = item;
const offers = product_info.specialOffer?.all ?? [];
return (
<div
className="product-item"
>
<a
href={product_info.productUrl}
className="product-image relative"
>
{product_info.productImage.large ? (
<img
src={product_info.productImage.large}
width="164"
height="164"
alt={product_info.productName}
className="lazy"
/>
) : (
<img
src="/static/assets/nguyencong_2023/images/not-image.png"
width="164"
height="164"
alt={product_info.productName}
className="lazy"
/>
)}
<span className="p-type-holder">
{product_info.productType.isHot === 1 && (
<i className="p-icon-type p-icon-hot"></i>
)}
{product_info.productType.isNew === 1 && (
<i className="p-icon-type p-icon-new"></i>
)}
</span>
</a>
<div className="product-info">
<a href={product_info.productUrl}>
<h3 className="product-title line-clamp-3">
{product_info.productName}
</h3>
</a>
<div className="product-martket-main flex items-center">
{product_info.marketPrice > 0 ? (
<p className="product-market-price">
{product_info.marketPrice.toLocaleString()}
</p>
) : (
<p className="product-market-price">
{product_info.sale_rules.normal_price.toLocaleString()}
</p>
)}
<div className="product-percent-price">
-{product_info.price_off || 0}%
</div>
</div>
<div className="product-price-main font-bold">
{item.price > '0'
? `${formatCurrency(product_info.price)}đ`
: 'Liên hệ'}
</div>
<div
className="p-quantity-sale"
>
<i className="sprite sprite-fire-deal"></i>
<div className="bg-gradient"></div>
<p className="js-line-deal-left"></p>
<span>
Còn {Number(item.quantity) - Number(item.sale_quantity)}/{Number(item.quantity)} sản phẩm
</span>
</div>
{offers.length > 0 && (
<div
className="product-offer line-clamp-2"
dangerouslySetInnerHTML={{
__html: product_info.specialOffer!.all![0].title,
}}
/>
)}
</div>
</div>
);
};
export default ProductItem;

View File

@@ -4,6 +4,8 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
import { FaCaretRight } from 'react-icons/fa';
import CounDown from './CounDown';
import ProductItem from './ProductItem'
import { productDealData } from './productDealData';
const BoxProductDeal: React.FC = () => {
return (
@@ -28,7 +30,13 @@ const BoxProductDeal: React.FC = () => {
slidesPerView={6}
loop={true}
navigation={true}
></Swiper>
>
{productDealData.map((item,index) => (
<SwiperSlide key={index}>
<ProductItem item={item} />
</SwiperSlide>
))}
</Swiper>
</div>
</div>
);

View File

@@ -36,7 +36,7 @@ export const productDealData: TypeListProductDeal = [
"priceUnit": "chiếc",
"marketPrice": 0,
"price": "11690000",
"price_off": "",
"price_off": 2,
"currency": "vnd",
"sale_rules": {
"price": "11690000",
@@ -1422,7 +1422,7 @@ export const productDealData: TypeListProductDeal = [
},
"comment": {
"rate": 5,
"total": 3
"total": 3,
},
"quantity": 1,
"productSKU": "",

View File

@@ -0,0 +1,29 @@
'use client';
import React from 'react';
import { menuData } from '../../Header/menuData';
import ItemCategory from './itemCategory';
import { Category } from '../../../../types/Menu';
const renderFeaturedCategories = (categories: Category[]) => {
return categories.map((cat, idx) => (
<React.Fragment key={idx}>
{cat.is_featured == '1' && <ItemCategory item={cat} />}
{cat.children && renderFeaturedCategories(cat.children)}
</React.Fragment>
));
};
const CategoryFeature = () => {
return (
<div className="box-category-outstanding boder-radius-10">
<div className="title-box">
<h2 className="title title-box font-[600]">Danh mục nổi bật</h2>
</div>
<div className="list-category-outstanding grid grid-cols-10 gap-3">
{renderFeaturedCategories(menuData[0].product.all_category)}
</div>
</div>
);
};
export default CategoryFeature;

View File

@@ -0,0 +1,34 @@
'use client';
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Category } from '@types/Menu';
const ItemCategory: React.FC<{ item: Category }> = ({ item }) => {
return (
<Link href={item.url} className="item-category flex flex-col items-center">
<p className="item-category-img">
{item.thumnail ? (
<Image
src={item.thumnail}
width={50}
height={50}
alt={item.title}
className="swiper-lazy lazy"
/>
) : (
<Image
src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/not-image.png"
width={50}
height={50}
alt={item.title}
className="border-radius-10"
/>
)}
</p>
<p className="title line-clamp-2">{item.title}</p>
</Link>
);
};
export default ItemCategory;

View File

@@ -1,6 +1,9 @@
import React from 'react';
import SliderHome from './SliderHome';
import BoxProductDeal from './BoxDeal';
import CategoryFeature from './CategoryFeature';
import BoxListCategory from './BoxCategory';
const Home = () => {
return (
<div className="page-hompage mt-4">
@@ -9,6 +12,11 @@ const Home = () => {
<SliderHome />
{/* deal */}
<BoxProductDeal />
{/* box danh mục nổi bật */}
<CategoryFeature />
{/* DANH SÁCH DANH MỤC */}
<BoxListCategory />
</div>
</div>
);

View File

@@ -2167,7 +2167,7 @@ textarea::placeholder {
.page-hompage .box-banner-under-slider {
margin-top: -50px;
}
.page-hompage .box-banner-under-slider svg {
.swiper .swiper-button-prev svg,.swiper .swiper-button-next svg {
width: 8px !important;
color: #000;
}
@@ -2438,7 +2438,7 @@ textarea::placeholder {
.page-hompage .box-product-category .title {
width: 30%;
}
.page-hompage .box-product-category .box-list-item-category {
.page-hompage .box-product-category .swiper {
padding: 2px;
min-height: 300px;
}

View File

@@ -0,0 +1,135 @@
export interface ProductImage {
small: string;
large: string;
original: string;
}
export interface ImageCollectionItem {
image: ProductImage;
alt: string;
}
export interface Brand {
id: number;
brand_index: string;
name: string;
image: string;
url: string;
}
export interface SaleRules {
price: string | number;
normal_price: number;
min_purchase: string | number;
max_purchase: string | number;
remain_quantity: number;
from_time: string | number;
to_time: string | number;
type: string;
}
export interface Deal {
id: string;
pro_id: string;
title: string;
price: string;
quantity: string;
min_purchase: string;
max_purchase: string;
is_featured: string;
from_time: string;
to_time: string;
is_started: number;
}
export interface PricingTrace {
price: string;
type: string;
type_id: string;
}
export interface Category {
id: string;
catPath: string;
name: string;
url: string;
}
export interface Extend {
pixel_code?: string;
review_count?: string;
review_score?: string;
buy_count?: string;
}
export interface SpecialOfferItem {
id: number;
title: string;
type: string;
thumbnail: string;
cash_value: number;
quantity: number;
from_time: string;
to_time: string;
url: string;
description:
string;
status: number;
}
export interface Product {
id: number;
productId: number;
priceUnit: string;
marketPrice: number;
price: string | number;
price_off: number;
currency: string;
sale_rules: SaleRules;
lastUpdate: string;
warranty: string;
productName: string;
productSummary: string;
package_accessory: string;
productImage: ProductImage;
imageCollection: ImageCollectionItem[];
productUrl: string;
brand: Brand;
visit: number;
rating: number;
reviewCount: number;
review: { rate: number; total: number };
comment: { rate: number; total: number };
quantity: number;
productSKU: string;
productModel: string;
hasVAT: number;
condition: string;
config_count: number;
configurable: number;
component_count: number;
specialOffer: { other?: SpecialOfferItem[], all?: SpecialOfferItem[] };
specialOfferGroup: [];
productType: {
isNew: number;
isHot: number;
isBestSale: number;
isSaleOff: number;
'online-only': number;
};
bulk_price: [];
thum_poster: string;
thum_poster_type: string;
addon: [];
variants: [];
variant_option: [];
extend: Extend;
weight: number;
promotion_price: number | null;
deal_list: Deal[];
pricing_traces: PricingTrace[];
categories: Category[];
}
export type TypeListProduct = Product[];

View File

@@ -100,8 +100,8 @@ interface ProductInfo {
productId: number;
priceUnit: string;
marketPrice: number;
price: string;
price_off: number | string;
price: string | number;
price_off: number;
currency: string;
sale_rules: SaleRules;
lastUpdate: string;
@@ -118,7 +118,7 @@ interface ProductInfo {
reviewCount: number;
review: ReviewInfo;
comment: ReviewInfo;
quantity: number;
quantity: string | number;
productSKU: string;
productModel: string;
hasVAT: number;
@@ -143,7 +143,7 @@ interface ProductInfo {
categories: Category[];
}
interface DealType {
export interface DealType {
id: string;
pro_id: string;
title: string;