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-18 17:35:46 +07:00
parent 8d2a21a88b
commit a7488565fb
9 changed files with 104 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
globals.d.ts vendored
View File

@@ -1 +1,5 @@
declare module "*.css";
declare module 'swiper/css';
declare module 'swiper/css/navigation';
declare module 'swiper/css/pagination';
declare module 'swiper/css/autoplay';

3
src/app/layout.tsx
View File

@@ -1,5 +1,8 @@
import type { Metadata } from 'next';
import '../styles/sf-pro-display.css';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import '../styles/globals.css';
import Header from '@components/layout/Header/Header';

2
src/app/page.tsx
View File

@@ -3,7 +3,7 @@ import SliderHome from '@components/layout/homepage/SliderHome';
export default function Home() {
return (
<div className="page-hompage mt-12">
<div className="page-hompage mt-4">
<div className="container">
{/* slider */}
<SliderHome />

2
src/components/layout/Header/HeaderBottom.tsx
View File

@@ -56,7 +56,7 @@ const HeaderBottom: React.FC = () => {
))}
</div>
</div>
<ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-12">
<ul className="list-category-header relative flex w-[calc(100%_-220px)] items-center justify-between gap-5">
<HeaderBottomRight />
</ul>
</div>

12
src/components/layout/Header/HeaderBottomRight.tsx
View File

@@ -42,15 +42,15 @@ const HeaderBottomRight: React.FC = () => {
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-6">
<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' />
<FaCaretDown size="16" className="text-white" />
</Link>
<div className="list-category-child flex justify-between">
<div className="box-left">
<ul className="flex flex-wrap gap-8">
<ul className="grid grid-cols-4 gap-5">
{item.isParent === '1' && (
<>
{item.id === '408'
@@ -62,7 +62,7 @@ const HeaderBottomRight: React.FC = () => {
{child1.title}
</Link>
{child1.isParent === '1' && (
<div className="list-child-lv3 flex-column mt-10 flex">
<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}
@@ -78,7 +78,7 @@ const HeaderBottomRight: React.FC = () => {
{_item_child.title}
</Link>
{_item_child.isParent === '1' && (
<div className="list-child-lv3 flex-column mt-10 flex">
<div className="list-child-lv3 mt-10 flex flex-col">
{_item_child.children?.map((_item_childtwo) => (
<Link
key={_item_childtwo.id}
@@ -98,7 +98,7 @@ const HeaderBottomRight: React.FC = () => {
</div>
<div className={`box-right flex-1 product-category-${item.id}`}>
<p className="title font-weight-700">Bán chạy nhất</p>
<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>

41
src/components/layout/Header/HeaderMid.tsx
View File

@@ -14,7 +14,7 @@ const HeaderMid: React.FC = () => {
return (
<div className="header-middle">
<div className="container flex items-center justify-between">
<div className="header-middle-left d-flex align-items-center">
<div className="header-middle-left flex items-center">
<Link href="/">
<Image
src="https://nguyencongpc.vn/media/lib/18-02-2025/logowhite-dfvefb.png"
@@ -62,43 +62,34 @@ const HeaderMid: React.FC = () => {
</div>
</div>
<div className="box-tabs-header d-flex align-items-center">
<Link
href="/buildpc"
className="item-tab-header d-flex flex-column align-items-center gap-4"
>
<p className="icon-item-tab d-flex align-items-center justify-content-center">
<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-weight-500">Xây dựng cấu hình</span>
<span className="font-500">Xây dựng cấu hình</span>
</Link>
<Link
href="javascript:void(0)"
className="item-tab-header d-flex flex-column align-items-center gap-4"
className="item-tab-header flex-column flex items-center gap-4"
>
<p className="icon-item-tab d-flex align-items-center justify-content-center">
<p className="icon-item-tab flex items-center justify-center">
<i className="sprite sprite-lienhe-header"></i>
</p>
<span className="font-weight-500">Khách hàng liên hệ</span>
<span className="font-500">Khách hàng liên hệ</span>
</Link>
<Link
href="/tin-tuc"
className="item-tab-header d-flex flex-column align-items-center gap-4"
>
<p className="icon-item-tab d-flex align-items-center justify-content-center">
<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 d-flex flex-column align-items-center gap-4"
>
<p className="icon-item-tab icon-cart-header d-flex align-items-center justify-content-center">
<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>
@@ -107,14 +98,14 @@ const HeaderMid: React.FC = () => {
<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 d-flex align-items-center justify-content-end gap-6">
<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 d-flex align-items-center justify-content-center"
className="cart-ttip-price-button flex items-center justify-center"
>
<p className="font-weight-700">THANH TOÁN NGAY </p>
</Link>
@@ -123,9 +114,9 @@ const HeaderMid: React.FC = () => {
<Link
href="/taikhoan"
className="user-header item-tab-header d-flex flex-column align-items-center gap-4"
className="user-header item-tab-header flex-column flex items-center gap-4"
>
<p className="icon-item-tab d-flex align-items-center justify-content-center">
<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>

20
src/components/layout/homepage/BoxProductDeal.tsx
View File

@@ -1,6 +1,24 @@
'use client';
import React from 'react';
const BoxProductDeal: React.FC = () => {};
const BoxProductDeal: React.FC = () => {
return (
<div className="box-product-deal boder-radius-10">
<div className="box-title-deal d-flex align-items-center justify-content-between">
<div className="title-deal d-flex align-items-center justify-content-center gap-10">
<i className="sprite sprite-icon-deal-home"></i>
<h2 className="title font-weight-800">Giá tốt mỗi ngày</h2>
<span className="text-time-deal-home color-white fz-16 font-weight-700">
Kết thúc sau
</span>
<div className="global-time-deal d-flex align-items-center gap-6"></div>
</div>
<a href="/deal" className="button-deal color-white mb-10">
Xem thêm khuyến mãi <i className="fa-solid fa-caret-right"></i>
</a>
</div>
</div>
);
};
export default BoxProductDeal;

89
src/components/layout/homepage/SliderHome.tsx
View File

@@ -12,49 +12,52 @@ const SliderHome: React.FC = () => {
return (
<>
<Swiper
className="box-banner-homepage relative"
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={1}
loop={true}
>
{dataSlider?.banner_slider_homepage_main?.map((banner, index) => (
<SwiperSlide key={index}>
<Link href={banner.desUrl} className="item-banner boder-radius-10">
<Image
src={banner.fileUrl}
width={1909}
height={57}
alt={banner.title}
priority={true}
className="boder-radius-10"
/>
</Link>
</SwiperSlide>
))}
</Swiper>
<Swiper
className="box-banner-under-slider"
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={2}
loop={true}
>
{dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
<SwiperSlide key={index} className="item">
<Link href={banner.desUrl} className="item-banner boder-radius-10">
<Image
src={banner.fileUrl}
width={banner.width}
height={banner.height}
alt={banner.title}
className="lazy boder-radius-10"
/>
</Link>
</SwiperSlide>
))}
</Swiper>
<div className="box-banner-homepage relative">
<Swiper
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={1}
loop={true}
>
{dataSlider?.banner_slider_homepage_main?.map((banner, index) => (
<SwiperSlide key={index}>
<Link href={banner.desUrl} className="item-banner boder-radius-10">
<Image
src={banner.fileUrl}
width={1909}
height={57}
alt={banner.title}
priority={true}
className="boder-radius-10"
/>
</Link>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="box-banner-under-slider">
<Swiper
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={2}
loop={true}
navigation={true}
>
{dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
<SwiperSlide key={index} className="item">
<Link href={banner.desUrl} className="item-banner boder-radius-10">
<Image
src={banner.fileUrl}
width={banner.width}
height={banner.height}
alt={banner.title}
className="lazy boder-radius-10"
/>
</Link>
</SwiperSlide>
))}
</Swiper>
</div>
</>
);
};

252
src/styles/globals.css
View File

@@ -1,8 +1,5 @@
@import 'tailwindcss';
@plugin 'daisyui';
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
:root {
--background: #ffffff;
@@ -29,17 +26,10 @@
.color-green {
color: var(--green);
}
.bg-white {
background: #fff;
}
.bg-gray {
background: #f4f4f4;
}
*,
::after,
::before {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
@@ -90,117 +80,14 @@ ol,
ul {
list-style: none;
}
.position-relative {
position: relative;
}
table {
border-collapse: collapse;
width: 100%;
}
.w-100 {
width: 100% !important;
}
.w-50 {
width: 50%;
}
.fz-16 {
font-size: 16px;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.mt-12 {
margin-top: 12px;
}
.mb-0 {
margin-bottom: 0 !important;
}
.gap-4 {
gap: 4px;
}
.gap-6 {
gap: 6px;
}
.gap-8 {
gap: 8px;
}
.gap-10 {
gap: 10px;
}
.gap-16 {
gap: 16px;
}
.gap-12 {
gap: 12px;
}
.gap-14 {
gap: 14px;
}
.gap-20 {
gap: 20px;
}
.pt-12 {
padding-top: 12px !important;
}
.text-center {
text-align: center;
}
img {
display: block;
max-width: 100%;
height: auto;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
font-family: 'SF Pro Display', sans-serif;
}
input,
input::placeholder,
select,
@@ -300,21 +187,6 @@ textarea::placeholder {
.border-error {
border: 2px solid red !important;
}
.font-weight-400 {
font-weight: 400;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.font-weight-700 {
font-weight: 700;
}
.font-weight-800 {
font-weight: 800;
}
.boder-radius-10 {
border-radius: 10px;
-webkit-border-radius: 10px;
@@ -322,42 +194,6 @@ textarea::placeholder {
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.line-clamp-1 {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.line-clamp-6 {
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.d-block {
display: block !important;
}
.d-none,
.hide {
display: none !important;
}
.grid {
display: -ms-grid;
display: grid;
gap: 12px;
}
.grid--product-info {
-ms-grid-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr;
@@ -370,78 +206,6 @@ textarea::placeholder {
-ms-grid-columns: 5.13fr 6.48fr;
grid-template-columns: 7fr 5.76fr;
}
.d-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.align-items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.flex-1 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.align-items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.align-items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.justify-content-end {
-ms-flex-pack: end !important;
-webkit-box-pack: end !important;
justify-content: flex-end !important;
}
.justify-content-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.justify-content-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.justify-content-around {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-around;
}
.flex-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-wrap {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-wrap: row;
flex-wrap: wrap;
}
.swiper-button-next,
.swiper-button-prev {
width: 28px !important;
@@ -1873,9 +1637,9 @@ textarea::placeholder {
color: #fff;
border: 1px solid #fff;
border-radius: 50%;
width: 33px;
height: 33px;
line-height: 33px;
width: 35px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0 10px 0 25px;
}
@@ -1940,10 +1704,6 @@ textarea::placeholder {
border-right: 1px solid #e3e3e3;
padding: 12px 0;
}
.header .header-bottom .list-category-child .box-left .sub-menu {
margin-bottom: 16px;
width: calc(100% / 4 - 8px);
}
.header .header-bottom .list-category-child .box-left .list-child-lv3 .child-lv3:hover {
color: var(--red);
}
@@ -2407,6 +2167,10 @@ textarea::placeholder {
.page-hompage .box-banner-under-slider {
margin-top: -50px;
}
.page-hompage .box-banner-under-slider svg {
width: 8px !important;
color: #000;
}
.page-hompage .box-product-deal {
padding: 12px;
margin: 20px 0;