tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upload 15/5

Browse Source
This commit is contained in:
Tieptk
2025-05-15 15:43:18 +07:00
parent 3393a712d4
commit 60479cbced
12 changed files with 1403 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -14,6 +14,9 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="./src/index.tsx"></script> <script type="module" src="./src/index.tsx"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
</body> </body>
</html> </html>

229
src/components/buildpc/CompareBuildpc.tsx Normal file
View File

@@ -0,0 +1,229 @@
export function CompareBuildpc() {
return (
<div className="list-component mt-5">
<div className="item-compare mb-12">
<div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
<b className="left w-[200px] name-component">
<a href="" className="block m-[auto_auto_auto_0]">
<img
src="/assets/images/logo-hacom.png"
width="100%"
height="100%"
className="w-[150px] block h-[50px] object-contain"
alt=""
/>
</a>
</b>
<div className="right w-[calc(100%-200px)] grid grid-cols-8">
<b className="item col-span-3">Sản phẩm</b>
<b className="item">Giá gốc</b>
<b className="item">Khuyến mãi</b>
<b className="item">Giao hàng</b>
<b className="item col-span-2">Thành tiền</b>
</div>
</div>
<div className="list-product">
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="ship underline">Liên hệ</b>
<div className="col-span-2 flex items-center justify-between">
<b className="total-amount">4.000.000đ</b>
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
</div>
</div>
</div>
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="ship underline text-[#33c600]">Liên hệ</b>
<div className="col-span-2 flex items-center justify-between">
<b className="total-amount">4.000.000đ</b>
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
</div>
</div>
</div>
</div>
{/* <!-- end list --> */}
<div className="text-right flex items-center font-bold justify-end mt-5">
<div className="mr-[10px]">
Tổng tiền (<span>2</span> sản phẩm) :
</div>
<div className="font-bold">6.000.000 Vnđ</div>
</div>
</div>
<div className="item-compare mb-12">
<div className="flex items-center border-b-[1px] border-neutral-200 pb-3">
<b className="left w-[200px] name-component">
<a href="" className="block m-[auto_auto_auto_0]">
<img
src="/assets/images/logo-hacom.png"
width="100%"
height="100%"
className="w-[150px] block h-[50px] object-contain"
alt=""
/>
</a>
</b>
<div className="right w-[calc(100%-200px)] grid grid-cols-8">
<b className="item col-span-3">Sản phẩm</b>
<b className="item">Giá gốc</b>
<b className="item">Khuyến mãi</b>
<b className="item">Giao hàng</b>
<b className="item col-span-2">Thành tiền</b>
</div>
</div>
<div className="list-product">
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="ship underline">Liên hệ</b>
<div className="col-span-2 flex items-center justify-between">
<b className="total-amount">4.000.000đ</b>
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
</div>
</div>
</div>
<div className="item-info-product flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="w-[calc(100%-200px)] grid items-center grid-cols-8">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="ship underline text-[#33c600]">Liên hệ</b>
<div className="col-span-2 flex items-center justify-between">
<b className="total-amount">4.000.000đ</b>
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
</div>
</div>
</div>
</div>
{/* <!-- end list --> */}
<div className="text-right flex items-center font-bold justify-end mt-5">
<div className="mr-[10px]">
Tổng tiền (<span>2</span> sản phẩm) :
</div>
<div className="font-bold">6.000.000 Vnđ</div>
</div>
</div>
</div>
);
}

270
src/components/buildpc/CreateBuildpc.tsx Normal file
View File

@@ -0,0 +1,270 @@
export function CreateBuildpc() {
return (
<>
<div className="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
<b className="left w-[200px] name-component">Sản phẩm</b>
<div className="right w-[calc(100%-200px)] grid grid-cols-8">
<b className="item col-span-3">Thông tin</b>
<b className="item">Giá gốc</b>
<b className="item">Khuyến mãi</b>
<b className="item">Thành tiền</b>
<b className="item col-span-2">Nhà cung cấp </b>
</div>
</div>
{/* <!-- header list buildpc --> */}
<div className="list-buildpc">
<div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU</b>
<div className="right w-[calc(100%-200px)]">
<div className="item-info-product grid items-center grid-cols-8">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="total-amount">4.000.000đ</b>
<div className="supplier col-span-2 flex items-center justify-between">
<a href="">
<img
src="/assets/images/logo-hacom.png"
width="100%"
height="100%"
className="w-full block h-[30px] object-contain"
alt=""
/>
</a>
<div className="btn flex items-center">
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
<a
href=""
className="group hover:bg-red-500 p-1.5 rounded-[50%]"
>
<i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="right w-[calc(100%-200px)]">
<div className="item-info-product grid items-center grid-cols-8">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="total-amount">4.000.000đ</b>
<div className="supplier col-span-2 flex items-center justify-between">
<a href="">
<img
src="/assets/images/logo-hacom.png"
width="100%"
height="100%"
className="w-full block h-[30px] object-contain"
alt=""
/>
</a>
<div className="btn flex items-center">
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
<a
href=""
className="group hover:bg-red-500 p-1.5 rounded-[50%]"
>
<i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
</div>
</div>
<div className="item-info-product grid items-center grid-cols-8 mt-2.5 pt-2.5 border-t-[1px] border-neutral-200">
<div className="info col-span-3">
<div className="flex items-center">
<a
href=""
className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
>
<img
src="/assets/images/lienkien-ram.png"
width="100%"
height="100%"
className="block w-full h-full object-contain"
alt=""
/>
</a>
<a
href=""
className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
>
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
</div>
<div className="old-price font-400">4.700.000 Vnđ</div>
<div className="price-saleoff font-400">20%</div>
<b className="total-amount">4.000.000đ</b>
<div className="supplier col-span-2 flex items-center justify-between">
<a href="">
<img
src="/assets/images/logo-hacom.png"
width="100%"
height="100%"
className="w-full block h-[30px] object-contain"
alt=""
/>
</a>
<div className="btn flex items-center">
<a
href=""
className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
>
Mua ngay
</a>
<a
href=""
className="group hover:bg-red-500 p-1.5 rounded-[50%]"
>
<i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
</div>
</div>
<a
href="javascript:void(0)"
className="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
>
+ Chọn thêm CPU
</a>
</div>
</div>
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="right w-[calc(100%-200px)]">
<a
href="javascript:void(0)"
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
>
+ Chọn thêm CPU
</a>
</div>
</div>
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="right w-[calc(100%-200px)]">
<a
href="javascript:void(0)"
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
>
+ Chọn thêm CPU
</a>
</div>
</div>
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="right w-[calc(100%-200px)]">
<a
href="javascript:void(0)"
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
>
+ Chọn thêm CPU
</a>
</div>
</div>
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="right w-[calc(100%-200px)]">
<a
href="javascript:void(0)"
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
>
+ Chọn thêm CPU
</a>
</div>
</div>
<div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
<b className="name-component block w-[200px]">CPU Cooler</b>
<div className="right w-[calc(100%-200px)]">
<a
href="javascript:void(0)"
className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
>
+ Chọn thêm CPU
</a>
</div>
</div>
</div>
{/* <!-- list buildpc --> */}
<div className="box-total-price pt-5">
<b className="block text-xl text-right text-red-600">
Tổng tiền 2 sản phẩm: 8.000.000đ
</b>
<div className="flex items-center justify-end gap-[10px] mt-3">
<a
href="javascript:void(0)"
className="flex items-center px-7 py-2.5 border border-[#b3b3b3] rounded hover:bg-[#e0e0e0]"
>
<i className="icon_2025 print"></i>
<span className="ml-2">In đơn hàng</span>
</a>
<a
href="javasript:void(0)"
className="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700"
>
Mua hàng tại Hacom
</a>
</div>
</div>
{/* <!-- tổng tiền --> */}
</>
);
}

48
src/components/footer/Footer.tsx
View File

@@ -1,54 +1,54 @@
export function Footer() { export function Footer() {
return ( return (
<footer class="border-t-[11px] border-[#1c039b] w-full"> <footer className="border-t-[11px] border-[#1c039b] w-full">
<div class="container"> <div className="container">
<a href="/" class="block my-[30px]"> <a href="/" className="block my-[30px]">
<img <img
src="/assets/images/logo-footer.png" src="/assets/images/logo-footer.png"
class="block w-[180px] h-[45px] object-contain" className="block w-[180px] h-[45px] object-contain"
width="100%" width="100%"
height="100%" height="100%"
alt="logo" alt="logo"
/> />
</a> </a>
<div class="main-footer grid grid-cols-4"> <div className="main-footer grid grid-cols-4">
<div class="item"> <div className="item">
<h3 class="title font-bold">Về chúng tôi</h3> <h3 className="title font-bold">Về chúng tôi</h3>
<a href="" class="block"> <a href="" className="block">
Độc quyền Độc quyền
</a> </a>
<a href="" class="block"> <a href="" className="block">
Mua online Mua online
</a> </a>
<a href="" class="block"> <a href="" className="block">
Bộ sưu tập Bộ sưu tập
</a> </a>
<a href="/tin-tuc" class="block"> <a href="/tin-tuc" className="block">
Blog Blog
</a> </a>
<div class="list-social flex items-center mt-[45px]"> <div className="list-social flex items-center mt-[45px]">
<a href="" target="_blank" class="mr-[10px]"> <a href="" target="_blank" className="mr-[10px]">
<i class="icon_2025 facebook"></i> <i className="icon_2025 facebook"></i>
</a> </a>
<a href="" target="_blank"> <a href="" target="_blank">
<i class="icon_2025 zalo"></i> <i className="icon_2025 zalo"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="item"> <div className="item">
<h3 class="title font-bold">Tuyển dụng</h3> <h3 className="title font-bold">Tuyển dụng</h3>
<a href="">Liên hệ</a> <a href="">Liên hệ</a>
<a href="">Điều khoản</a> <a href="">Điều khoản</a>
<a href="">Chính sách bảo mật</a> <a href="">Chính sách bảo mật</a>
<a href="">Trở thành đối tác</a> <a href="">Trở thành đối tác</a>
</div> </div>
<div class="item"> <div className="item">
<h3 class="title font-bold">Liên kết</h3> <h3 className="title font-bold">Liên kết</h3>
<a href="hurasoft.com">Hurasoft.com</a> <a href="hurasoft.com">Hurasoft.com</a>
</div> </div>
<div class="item"> <div className="item">
<h3 class="title font-bold">Giới thiệu</h3> <h3 className="title font-bold">Giới thiệu</h3>
<b class="text-[16px]"> <b className="text-[16px]">
BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở BESTPC là kênh tổng hợp tin khuyến mãi chuyên nghiệp đầu tiên ở
Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ nghành Việt Nam, cho phép bạn tìm kiếm mã giảm giá, tin ưu đãi từ nghành
hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC
@@ -58,8 +58,8 @@ export function Footer() {
</div> </div>
</div> </div>
</div> </div>
<div class="footer-bottom bg-[#ebebeb] py-[15px]"> <div className="footer-bottom bg-[#ebebeb] py-[15px]">
<b class="text-center block"> <b className="text-center block">
© Copyright 2025 by Hurasoft. All Rights Reserved. © Copyright 2025 by Hurasoft. All Rights Reserved.
</b> </b>
</div> </div>

78
src/components/product/FormReview.tsx
View File

@@ -1,124 +1,128 @@
export function FormReview() { export function FormReview({ show, onClose }) {
function closeReview() {}
return ( return (
<> <>
<div id="backgroundPopup" onClick={() => closeReview()}></div>
<div <div
class="box-form-review hidden fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px]" id="backgroundPopup"
className={`${show ? "active" : ""}`}
onClick={onClose}
></div>
<div
className={`box-form-review fixed left-[50%] top-[50%] w-[860px] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[20px] ${
show ? "" : "hidden"
}`}
id="js-box-review" id="js-box-review"
> >
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
<b class="text-center text-xl block">Đánh giá sản phẩm</b> <b className="text-center text-xl block">Đánh giá sản phẩm</b>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
onClick={() => closeReview()} onClick={onClose}
id="js-close-review" id="js-close-review"
class="absolute right-0 top-0 text-[#808080] text-[22px] " className="absolute right-0 top-0 text-[#808080] text-[22px] "
> >
x <i class="icon_2025 close"></i>
</a> </a>
</div> </div>
<div class="info-form-review w-[500px] mx-[auto]"> <div className="info-form-review w-[500px] mx-[auto]">
<a <a
href="" href=""
class="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]" className="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
width="100%" width="100%"
height="100%" height="100%"
class="block w-[100px] h-[100px] m-[0_auto]" className="block w-[100px] h-[100px] m-[0_auto]"
alt="" alt=""
/> />
</a> </a>
<a href="" class="text-center block mb-[10px]"> <a href="" className="text-center block mb-[10px]">
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD) Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD)
- Hàng Chính Hãng - Hàng Chính Hãng
</a> </a>
<div class="flex justify-center"> <div className="flex justify-center">
<div class="rating-selection"> <div className="rating-selection">
<input <input
type="radio" type="radio"
class="rating-input" className="rating-input"
id="star5" id="star5"
name="rating" name="rating"
value="5" value="5"
/> />
<label for="star5" class="rating-star"></label> <label for="star5" className="rating-star"></label>
<input <input
type="radio" type="radio"
class="rating-input" className="rating-input"
id="star4" id="star4"
name="rating" name="rating"
value="4" value="4"
/> />
<label for="star4" class="rating-star"></label> <label for="star4" className="rating-star"></label>
<input <input
type="radio" type="radio"
class="rating-input" className="rating-input"
id="star3" id="star3"
name="rating" name="rating"
value="3" value="3"
/> />
<label for="star3" class="rating-star"></label> <label for="star3" className="rating-star"></label>
<input <input
type="radio" type="radio"
class="rating-input" className="rating-input"
id="star2" id="star2"
name="rating" name="rating"
value="2" value="2"
/> />
<label for="star2" class="rating-star"></label> <label for="star2" className="rating-star"></label>
<input <input
type="radio" type="radio"
class="rating-input" className="rating-input"
id="star1" id="star1"
name="rating" name="rating"
value="1" value="1"
/> />
<label for="star1" class="rating-star"></label> <label for="star1" className="rating-star"></label>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div className="clearfix"></div>
</div> </div>
<div class="form-input mt-[20px]"> <div className="form-input mt-[20px]">
<input <input
type="text" type="text"
name="title" name="title"
placeholder="Mời bạn nhập tiêu đề..." placeholder="Mời bạn nhập tiêu đề..."
/> />
<div class="note-error"></div> <div className="note-error"></div>
</div> </div>
<div class="form-input mt-[10px]"> <div className="form-input mt-[10px]">
<textarea <textarea
name="content" name="content"
placeholder="Mời bạn chia sẻ cảm nhận..." placeholder="Mời bạn chia sẻ cảm nhận..."
id="" id=""
></textarea> ></textarea>
<div class="note-error"></div> <div className="note-error"></div>
</div> </div>
<input id="js-file-upload-id" type="hidden" value="" /> <input id="js-file-upload-id" type="hidden" value="" />
<div id="js-container-selector" class="mt-[10px] flex items-center"> <div id="js-container-selector" className="mt-[10px] flex items-center">
<a <a
href="javascript:void(0)" href="javascript:void(0)"
class="flex items-center" className="flex items-center"
id="js-select-file" id="js-select-file"
> >
<i class="icon_2025 upload_image"></i> <i className="icon_2025 upload_image"></i>
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span> <span className="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
<span class="px-[5px]">(tối đa 3 ảnh)</span> <span className="px-[5px]">(tối đa 3 ảnh)</span>
</a> </a>
</div> </div>
<button <button
type="submit" type="submit"
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]" className="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]"
> >
Gửi đánh giá Gửi đánh giá
</button> </button>

228
src/components/product/MemberReview.tsx
View File

@@ -1,271 +1,295 @@
import { useState } from "react";
import { FormReview } from "../../components/product/FormReview";
export function MemberReview() { export function MemberReview() {
const [showForm, setShowForm] = useState(false);
return ( return (
<div class="p-[15px] bg-white mt-5 rounded-[8px]"> <>
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]"> <div className="p-[15px] bg-white mt-5 rounded-[8px]">
<h3 class="text-xl font-bold">Thành viên BestPC đánh giá</h3> <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
<div class="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden"> <h3 className="text-xl font-bold">Thành viên BestPC đánh giá</h3>
<div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
<select <select
name="" name=""
id="" id=""
class=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]" className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
> >
<option value="">Top review</option> <option value="">Top review</option>
<option value="">Review mới nhất</option> <option value="">Review mới nhất</option>
</select> </select>
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i> <i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
</div> </div>
</div> </div>
<div class="flex gap-[25px]"> <div className="flex gap-[25px]">
<div class="left w-[20%]"> <div className="left w-[20%]">
<b class="text-center block pt-[20px] pb-[5px] text-2xl"> <b className="text-center block pt-[20px] pb-[5px] text-2xl">
54 đánh giá 54 đánh giá
</b> </b>
<div class="flex items-center justify-center"> <div className="flex items-center justify-center">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<span class="ml-[5px] mt-[3px]">4.8</span> <span className="ml-[5px] mt-[3px]">4.8</span>
</div> </div>
<div class="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]"> <div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<i class="icon-star star5"></i> <i className="icon-star star5"></i>
<span>50 đánh giá</span> <span>50 đánh giá</span>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<span>50 đánh giá</span> <span>50 đánh giá</span>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<i class="icon-star star3"></i> <i className="icon-star star3"></i>
<span>50 đánh giá</span> <span>50 đánh giá</span>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<i class="icon-star star2"></i> <i className="icon-star star2"></i>
<span>50 đánh giá</span> <span>50 đánh giá</span>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<i class="icon-star star1"></i> <i className="icon-star star1"></i>
<span>50 đánh giá</span> <span>50 đánh giá</span>
</div> </div>
</div> </div>
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]"> <div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p> <p className="text-center mt-[10px]">
Đánh giá của bạn về sản phẩm
</p>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
id="js-show-form" id="js-show-form"
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]" onClick={(e) => {
e.preventDefault();
setShowForm(true);
}}
className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
> >
Gửi đánh giá của bạn về sản phẩm Gửi đánh giá của bạn về sản phẩm
</a> </a>
</div> </div>
</div> </div>
<div class="right w-[80%]"> <div className="right w-[80%]">
<div class="list-review mt-[15px]"> <div className="list-review mt-[15px]">
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]"> <div className="w-[80px] mr-[20px]">
<img <img
src="/assets/images/avartar-review-1.png" src="/assets/images/avartar-review-1.png"
width="75px" width="75px"
height="75px" height="75px"
alt="avartar" alt="avartar"
/> />
<div class="time mt-[10px]"> <div className="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b> <b className="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p> <p className="text-center">10:00pm 20/02/2025</p>
</div> </div>
</div> </div>
<div class="w-[calc(100%-100px)]"> <div className="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]"> <div className="flex items-center mb-[5px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b> <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div> </div>
<p class="content mb-[5px]"> <p className="content mb-[5px]">
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type printer took a galley of type and scrambled it to make a
specimen book. I type specimen book. I
</p> </p>
<div class="flex items-center mb-[10px]"> <div className="flex items-center mb-[10px]">
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
data-fancybox="gallery" data-fancybox="gallery"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
data-fancybox="gallery" data-fancybox="gallery"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
data-fancybox="gallery" data-fancybox="gallery"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
</div> </div>
<div class="btn"> <div className="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]"> <a
Bình luận <span class="ml-[3px] text-black">(23)</span> href="javascript:void(0)"
className="text-[#1877F2] mr-[10px]"
>
Bình luận{" "}
<span className="ml-[3px] text-black">(23)</span>
</a> </a>
<a href="javascript:void(0)" class="text-[#1877F2]"> <a href="javascript:void(0)" className="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span> Thích <span className="ml-[3px] text-black">(23)</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]"> <div className="w-[80px] mr-[20px]">
<img <img
src="/assets/images/avartar-review-2.png" src="/assets/images/avartar-review-2.png"
width="75px" width="75px"
height="75px" height="75px"
alt="avartar" alt="avartar"
/> />
<div class="time mt-[10px]"> <div className="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b> <b className="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p> <p className="text-center">10:00pm 20/02/2025</p>
</div> </div>
</div> </div>
<div class="w-[calc(100%-100px)]"> <div className="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]"> <div className="flex items-center mb-[5px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b> <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div> </div>
<p class="content mb-[5px]"> <p className="content mb-[5px]">
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type printer took a galley of type and scrambled it to make a
specimen book. I type specimen book. I
</p> </p>
<div class="flex items-center mb-[10px]"> <div className="flex items-center mb-[10px]">
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
data-fancybox="gallery" data-fancybox="gallery"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
data-fancybox="gallery" data-fancybox="gallery"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
data-fancybox="gallery" data-fancybox="gallery"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
</div> </div>
<div class="btn"> <div className="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]"> <a
Bình luận <span class="ml-[3px] text-black">(23)</span> href="javascript:void(0)"
className="text-[#1877F2] mr-[10px]"
>
Bình luận{" "}
<span className="ml-[3px] text-black">(23)</span>
</a> </a>
<a href="javascript:void(0)" class="text-[#1877F2]"> <a href="javascript:void(0)" className="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span> Thích <span className="ml-[3px] text-black">(23)</span>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]"> <div className="w-[80px] mr-[20px]">
<img <img
src="/assets/images/avartar-review-3.png" src="/assets/images/avartar-review-3.png"
width="75px" width="75px"
height="75px" height="75px"
alt="avartar" alt="avartar"
/> />
<div class="time mt-[10px]"> <div className="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b> <b className="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p> <p className="text-center">10:00pm 20/02/2025</p>
</div> </div>
</div> </div>
<div class="w-[calc(100%-100px)]"> <div className="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]"> <div className="flex items-center mb-[5px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b> <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div> </div>
<p class="content mb-[5px]"> <p className="content mb-[5px]">
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type printer took a galley of type and scrambled it to make a
specimen book. I type specimen book. I
</p> </p>
<div class="flex items-center mb-[10px]"> <div className="flex items-center mb-[10px]">
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
data-fancybox="gallery" data-fancybox="gallery"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
data-fancybox="gallery" data-fancybox="gallery"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
<a <a
href="/src/assets/images/small-product-detail.png" href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" className="w-[80px] block mr-[10px]"
data-fancybox="gallery" data-fancybox="gallery"
> >
<img <img
src="/assets/images/small-product-detail.png" src="/assets/images/small-product-detail.png"
class="w-[100%] block" className="w-[100%] block"
alt="" alt=""
/> />
</a> </a>
</div> </div>
<div class="btn"> <div className="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]"> <a
Bình luận <span class="ml-[3px] text-black">(23)</span> href="javascript:void(0)"
className="text-[#1877F2] mr-[10px]"
>
Bình luận{" "}
<span className="ml-[3px] text-black">(23)</span>
</a> </a>
<a href="javascript:void(0)" class="text-[#1877F2]"> <a href="javascript:void(0)" className="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span> Thích <span className="ml-[3px] text-black">(23)</span>
</a> </a>
</div> </div>
</div> </div>
@@ -274,12 +298,14 @@ export function MemberReview() {
{/* end list review */} {/* end list review */}
<a <a
href="javascript:void(0)" href="javascript:void(0)"
class="pt-[15px] text-[#FF7A00] btn-more-review" className="pt-[15px] text-[#FF7A00] btn-more-review"
> >
Xem thêm <span>23</span> bình luận khác Xem thêm <span>23</span> bình luận khác
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<FormReview show={showForm} onClose={() => setShowForm(false)} />
</>
); );
} }

26
src/components/product/ProductDescription.tsx
View File

@@ -31,15 +31,15 @@ export function ProductDescription() {
}; };
return ( return (
<div class="product-information mt-5"> <div className="product-information mt-5">
<div class="flex gap-[15px]"> <div className="flex gap-[15px]">
<div class="left w-[60%]"> <div className="left w-[60%]">
<div class="box-desc bg-white p-[12px] rounded-[8px]"> <div className="box-desc bg-white p-[12px] rounded-[8px]">
<h3 class="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold"> <h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
Thông tin sản phẩm Thông tin sản phẩm
</h3> </h3>
<div id="content-desciption"> <div id="content-desciption">
<div class="content nd" ref={contentRef}> <div className="content nd" ref={contentRef}>
<p style="text-align: justify;"> <p style="text-align: justify;">
<strong>Laptop HP Victus 16 R0376TX AY8Z2PA</strong> sở hữu <strong>Laptop HP Victus 16 R0376TX AY8Z2PA</strong> sở hữu
chip xử lý Intel Core i7 13700HX cùng VGA RTX 3050 6GB để có chip xử lý Intel Core i7 13700HX cùng VGA RTX 3050 6GB để có
@@ -295,13 +295,13 @@ export function ProductDescription() {
</div> </div>
{/* <!-- end box desc --> */} {/* <!-- end box desc --> */}
</div> </div>
<div class="right w-[40%]"> <div className="right w-[40%]">
<div class="box-spec bg-white p-[12px] rounded-[8px]"> <div className="box-spec bg-white p-[12px] rounded-[8px]">
<h3 class="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold"> <h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
Thông tin chi tiết Thông tin chi tiết
</h3> </h3>
<div class="content table"> <div className="content table">
<table width="638"> <table width="638">
<tbody> <tbody>
<tr> <tr>
@@ -366,7 +366,7 @@ export function ProductDescription() {
</tbody> </tbody>
</table> </table>
</div> </div>
<div id="content-specification" class="hidden table"> <div id="content-specification" className="hidden table">
<table width="638"> <table width="638">
<tbody> <tbody>
<tr> <tr>
@@ -434,9 +434,9 @@ export function ProductDescription() {
<a <a
href="#content-specification" href="#content-specification"
data-fancybox data-fancybox
class="more-all flex items-center justify-center" className="more-all flex items-center justify-center"
> >
Xem thêm thông số <i class="icon_2025 angle-bottom"></i> Xem thêm thông số <i className="icon_2025 angle-bottom"></i>
</a> </a>
</div> </div>
{/* <!-- box spec --> */} {/* <!-- box spec --> */}

154
src/components/product/ProductReview.tsx
View File

@@ -1,177 +1,179 @@
export function ProductReview() { export function ProductReview() {
return ( return (
<div class="p-[15px] bg-white mt-5 rounded-[8px]"> <div className="p-[15px] bg-white mt-5 rounded-[8px]">
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]"> <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
<h3 class="text-xl font-bold">Đánh giá trên internet</h3> <h3 className="text-xl font-bold">Đánh giá trên internet</h3>
<div class="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden"> <div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
<select <select
name="" name=""
id="" id=""
class=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]" className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
> >
<option value="">Top review</option> <option value="">Top review</option>
<option value="">Review mới nhất</option> <option value="">Review mới nhất</option>
</select> </select>
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i> <i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
</div> </div>
</div> </div>
<div class="flex gap-[25px]"> <div className="flex gap-[25px]">
<div class="left w-[20%]"> <div className="left w-[20%]">
<b class="text-center block pt-[20px] pb-[5px] text-2xl"> <b className="text-center block pt-[20px] pb-[5px] text-2xl">
54 đánh giá 54 đánh giá
</b> </b>
<div class="flex items-center justify-center"> <div className="flex items-center justify-center">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<span class="ml-[5px] mt-[3px]">4.8</span> <span className="ml-[5px] mt-[3px]">4.8</span>
</div> </div>
<div class="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]"> <div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<span> <span>
Hanoicomputer{" "} Hanoicomputer{" "}
<a href="" class="ml-[5px] text-[#1877F2]"> <a href="" className="ml-[5px] text-[#1877F2]">
(240) (240)
</a> </a>
</span> </span>
<i class="icon-star star5"></i> <i className="icon-star star5"></i>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<span> <span>
Anphatpc{" "} Anphatpc{" "}
<a href="" class="ml-[5px] text-[#1877F2]"> <a href="" className="ml-[5px] text-[#1877F2]">
(240) (240)
</a> </a>
</span> </span>
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<span> <span>
Mygear{" "} Mygear{" "}
<a href="" class="ml-[5px] text-[#1877F2]"> <a href="" className="ml-[5px] text-[#1877F2]">
(240) (240)
</a> </a>
</span> </span>
<i class="icon-star star3"></i> <i className="icon-star star3"></i>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<span> <span>
Hoangphatpc{" "} Hoangphatpc{" "}
<a href="" class="ml-[5px] text-[#1877F2]"> <a href="" className="ml-[5px] text-[#1877F2]">
(240) (240)
</a> </a>
</span> </span>
<i class="icon-star star2"></i> <i className="icon-star star2"></i>
</div> </div>
<div class="flex items-center justify-between mb-[10px]"> <div className="flex items-center justify-between mb-[10px]">
<span> <span>
Phucanhpc{" "} Phucanhpc{" "}
<a href="" class="ml-[5px] text-[#1877F2]"> <a href="" className="ml-[5px] text-[#1877F2]">
(240) (240)
</a> </a>
</span> </span>
<i class="icon-star star1"></i> <i className="icon-star star1"></i>
</div> </div>
</div> </div>
<div class="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]"> <div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
<p class="text-center mt-[10px]">Đánh giá của bạn về sản phẩm</p> <p className="text-center mt-[10px]">
Đánh giá của bạn về sản phẩm
</p>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
class="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]" className="block mt-[10px] h-[40px] leading-[40px] text-center text-white bg-[#FF7A00] rounded-[4px]"
> >
Gửi đánh giá của bạn về sản phẩm Gửi đánh giá của bạn về sản phẩm
</a> </a>
</div> </div>
</div> </div>
<div class="right w-[80%]"> <div className="right w-[80%]">
<div class="list-review mt-[15px]"> <div className="list-review mt-[15px]">
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]"> <div className="w-[80px] mr-[20px]">
<a href="hacom.vn" target="_blank" class="text-[#1877F2]"> <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
Hacom.vn Hacom.vn
</a> </a>
<div class="time mt-[5px]"> <div className="time mt-[5px]">
<b class="mb-[2px] text-center block">Dino</b> <b className="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p> <p className="text-center">10:00pm 20/02/2025</p>
</div> </div>
</div> </div>
<div class="w-[calc(100%-100px)]"> <div className="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]"> <div className="flex items-center mb-[5px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b> <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div> </div>
<p class="content mb-[5px] text-base"> <p className="content mb-[5px] text-base">
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type printer took a galley of type and scrambled it to make a type
specimen book. I specimen book. I
</p> </p>
<a href="javascript:void(0)" class="flex items-start"> <a href="javascript:void(0)" className="flex items-start">
<span class="text-[16px] mr-[7px] underline"> <span className="text-[16px] mr-[7px] underline">
Xem link nguồn Xem link nguồn
</span> </span>
<i class="icon_2025 link-review"></i> <i className="icon_2025 link-review"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]"> <div className="w-[80px] mr-[20px]">
<a href="hacom.vn" target="_blank" class="text-[#1877F2]"> <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
Hacom.vn Hacom.vn
</a> </a>
<div class="time mt-[5px]"> <div className="time mt-[5px]">
<b class="mb-[2px] text-center block">Dino</b> <b className="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p> <p className="text-center">10:00pm 20/02/2025</p>
</div> </div>
</div> </div>
<div class="w-[calc(100%-100px)]"> <div className="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]"> <div className="flex items-center mb-[5px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b> <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div> </div>
<p class="content mb-[5px] text-base"> <p className="content mb-[5px] text-base">
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type printer took a galley of type and scrambled it to make a type
specimen book. I specimen book. I
</p> </p>
<a href="javascript:void(0)" class="flex items-start"> <a href="javascript:void(0)" className="flex items-start">
<span class="text-[16px] mr-[7px] underline"> <span className="text-[16px] mr-[7px] underline">
Xem link nguồn Xem link nguồn
</span> </span>
<i class="icon_2025 link-review"></i> <i className="icon_2025 link-review"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]"> <div className="w-[80px] mr-[20px]">
<a href="hacom.vn" target="_blank" class="text-[#1877F2]"> <a href="hacom.vn" target="_blank" className="text-[#1877F2]">
Hacom.vn Hacom.vn
</a> </a>
<div class="time mt-[5px]"> <div className="time mt-[5px]">
<b class="mb-[2px] text-center block">Dino</b> <b className="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p> <p className="text-center">10:00pm 20/02/2025</p>
</div> </div>
</div> </div>
<div class="w-[calc(100%-100px)]"> <div className="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]"> <div className="flex items-center mb-[5px]">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b> <b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div> </div>
<p class="content mb-[5px] text-base"> <p className="content mb-[5px] text-base">
Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type printer took a galley of type and scrambled it to make a type
specimen book. I specimen book. I
</p> </p>
<a href="javascript:void(0)" class="flex items-start"> <a href="javascript:void(0)" className="flex items-start">
<span class="text-[16px] mr-[7px] underline"> <span className="text-[16px] mr-[7px] underline">
Xem link nguồn Xem link nguồn
</span> </span>
<i class="icon_2025 link-review"></i> <i className="icon_2025 link-review"></i>
</a> </a>
</div> </div>
</div> </div>
@@ -179,7 +181,7 @@ export function ProductReview() {
{/* end list review */} {/* end list review */}
<a <a
href="javascript:void(0)" href="javascript:void(0)"
class="pt-[15px] text-[#FF7A00] btn-more-review" className="pt-[15px] text-[#FF7A00] btn-more-review"
> >
Xem thêm <span>23</span> bình luận khác Xem thêm <span>23</span> bình luận khác
</a> </a>

166
src/components/product/SupplierListBox.tsx
View File

@@ -1,32 +1,34 @@
export function SupplierListBox() { export function SupplierListBox() {
return ( return (
<div class="p-[15px] bg-white mt-5 rounded-[8px]"> <div className="p-[15px] bg-white mt-5 rounded-[8px]">
<div class="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]"> <div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
<h3 class="text-xl font-bold">Nhà cung cấp trên BestPC - Tại Hà Nội</h3> <h3 className="text-xl font-bold">
<div class="flex items-center"> Nhà cung cấp trên BestPC - Tại Hà Nội
<div class="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]"> </h3>
<i class="icon_2025 map-2"></i> <div className="flex items-center">
<div className="flex items-center relative border border-[#b1b1b1] mr-[10px] w-[410px] h-[45px] px-[10px] rounded-[4px]">
<i className="icon_2025 map-2"></i>
<input <input
type="text" type="text"
placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất" placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
class="outline-none ml-[5px] h-full w-full" className="outline-none ml-[5px] h-full w-full"
/> />
</div> </div>
<div class="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden"> <div className="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
<select <select
name="" name=""
id="" id=""
class=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]" className=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
> >
<option value="">Sắp xếp</option> <option value="">Sắp xếp</option>
<option value="">Mới</option> <option value="">Mới</option>
</select> </select>
<i class="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i> <i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]"> <div className="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
<div> <div>
<b>Nhà cung cấp</b> <b>Nhà cung cấp</b>
</div> </div>
@@ -41,39 +43,39 @@ export function SupplierListBox() {
</div> </div>
</div> </div>
<div class="list "> <div className="list ">
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]"> <div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
<div class="flex items-start supplier"> <div className="flex items-start supplier">
<div class="logo mr-[10px]"> <div className="logo mr-[10px]">
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]"> <div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
<img <img
src="/assets/images/logo-hacom.png" src="/assets/images/logo-hacom.png"
class="block w-full h-full object-contain m-[0_auto]" className="block w-full h-full object-contain m-[0_auto]"
width="100%" width="100%"
height="100%" height="100%"
alt="hacom" alt="hacom"
/> />
</div> </div>
<div class="flex items-center justify-center mt-2"> <div className="flex items-center justify-center mt-2">
<i class="icon_2025 map-4"></i> <i className="icon_2025 map-4"></i>
<span class="ml-[5px]">3km</span> <span className="ml-[5px]">3km</span>
</div> </div>
</div> </div>
<div> <div>
<div class="flex items-center"> <div className="flex items-center">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<span class="ml-[5px] mt-[3px]">4.7</span> <span className="ml-[5px] mt-[3px]">4.7</span>
</div> </div>
<a href="" class="text-[#1877F2] font-bold"> <a href="" className="text-[#1877F2] font-bold">
Hanoicomputer Hanoicomputer
</a> </a>
<a href="" class="text-[#E85933] underline block"> <a href="" className="text-[#E85933] underline block">
Xem 7 cửa hàng Xem 7 cửa hàng
</a> </a>
</div> </div>
</div> </div>
<div class="ship"> <div className="ship">
<p>Miễn phí giao hàng</p> <p>Miễn phí giao hàng</p>
<p> <p>
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
@@ -81,64 +83,66 @@ export function SupplierListBox() {
</p> </p>
</div> </div>
<div class="price"> <div className="price">
<div class="flex items-center text-base"> <div className="flex items-center text-base">
<span>Giá:</span> <span>Giá:</span>
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b> <b className="ml-[5px] text-[#D80A00]">
9.000.000đ - 20.000.000đ
</b>
</div> </div>
<b class="mt-2">Đã có VAT</b> <b className="mt-2">Đã có VAT</b>
</div> </div>
<div class=""> <div className="">
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]"> <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
8GB - 9.000.000đ new White 8GB - 9.000.000đ new White
</p> </p>
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]"> <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
8GB - 9.000.000đ new White 8GB - 9.000.000đ new White
</p> </p>
</div> </div>
<div> <div>
<a <a
href="" href=""
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600" className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
> >
Liên hệ ngay Liên hệ ngay
</a> </a>
</div> </div>
</div> </div>
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]"> <div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
<div class="flex items-start supplier"> <div className="flex items-start supplier">
<div class="logo mr-[10px]"> <div className="logo mr-[10px]">
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]"> <div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
<img <img
src="/assets/images/logo-hacom.png" src="/assets/images/logo-hacom.png"
class="block w-full h-full object-contain m-[0_auto]" className="block w-full h-full object-contain m-[0_auto]"
width="100%" width="100%"
height="100%" height="100%"
alt="hacom" alt="hacom"
/> />
</div> </div>
<div class="flex items-center justify-center mt-2"> <div className="flex items-center justify-center mt-2">
<i class="icon_2025 map-4"></i> <i className="icon_2025 map-4"></i>
<span class="ml-[5px]">3km</span> <span className="ml-[5px]">3km</span>
</div> </div>
</div> </div>
<div> <div>
<div class="flex items-center"> <div className="flex items-center">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<span class="ml-[5px] mt-[3px]">4.7</span> <span className="ml-[5px] mt-[3px]">4.7</span>
</div> </div>
<a href="" class="text-[#1877F2] font-bold"> <a href="" className="text-[#1877F2] font-bold">
Hanoicomputer Hanoicomputer
</a> </a>
<a href="" class="text-[#E85933] underline block"> <a href="" className="text-[#E85933] underline block">
Xem 7 cửa hàng Xem 7 cửa hàng
</a> </a>
</div> </div>
</div> </div>
<div class="ship"> <div className="ship">
<p>Miễn phí giao hàng</p> <p>Miễn phí giao hàng</p>
<p> <p>
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
@@ -146,64 +150,66 @@ export function SupplierListBox() {
</p> </p>
</div> </div>
<div class="price"> <div className="price">
<div class="flex items-center text-base"> <div className="flex items-center text-base">
<span>Giá:</span> <span>Giá:</span>
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b> <b className="ml-[5px] text-[#D80A00]">
9.000.000đ - 20.000.000đ
</b>
</div> </div>
<b class="mt-2">Đã có VAT</b> <b className="mt-2">Đã có VAT</b>
</div> </div>
<div class=""> <div className="">
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]"> <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
8GB - 9.000.000đ new White 8GB - 9.000.000đ new White
</p> </p>
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]"> <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
8GB - 9.000.000đ new White 8GB - 9.000.000đ new White
</p> </p>
</div> </div>
<div> <div>
<a <a
href="" href=""
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600" className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
> >
Liên hệ ngay Liên hệ ngay
</a> </a>
</div> </div>
</div> </div>
<div class="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]"> <div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
<div class="flex items-start supplier"> <div className="flex items-start supplier">
<div class="logo mr-[10px]"> <div className="logo mr-[10px]">
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]"> <div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
<img <img
src="/assets/images/logo-hacom.png" src="/assets/images/logo-hacom.png"
class="block w-full h-full object-contain m-[0_auto]" className="block w-full h-full object-contain m-[0_auto]"
width="100%" width="100%"
height="100%" height="100%"
alt="hacom" alt="hacom"
/> />
</div> </div>
<div class="flex items-center justify-center mt-2"> <div className="flex items-center justify-center mt-2">
<i class="icon_2025 map-4"></i> <i className="icon_2025 map-4"></i>
<span class="ml-[5px]">3km</span> <span className="ml-[5px]">3km</span>
</div> </div>
</div> </div>
<div> <div>
<div class="flex items-center"> <div className="flex items-center">
<i class="icon-star star4"></i> <i className="icon-star star4"></i>
<span class="ml-[5px] mt-[3px]">4.7</span> <span className="ml-[5px] mt-[3px]">4.7</span>
</div> </div>
<a href="" class="text-[#1877F2] font-bold"> <a href="" className="text-[#1877F2] font-bold">
Hanoicomputer Hanoicomputer
</a> </a>
<a href="" class="text-[#E85933] underline block"> <a href="" className="text-[#E85933] underline block">
Xem 7 cửa hàng Xem 7 cửa hàng
</a> </a>
</div> </div>
</div> </div>
<div class="ship"> <div className="ship">
<p>Miễn phí giao hàng</p> <p>Miễn phí giao hàng</p>
<p> <p>
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
@@ -211,26 +217,28 @@ export function SupplierListBox() {
</p> </p>
</div> </div>
<div class="price"> <div className="price">
<div class="flex items-center text-base"> <div className="flex items-center text-base">
<span>Giá:</span> <span>Giá:</span>
<b class="ml-[5px] text-[#D80A00]">9.000.000đ - 20.000.000đ</b> <b className="ml-[5px] text-[#D80A00]">
9.000.000đ - 20.000.000đ
</b>
</div> </div>
<b class="mt-2">Đã có VAT</b> <b className="mt-2">Đã có VAT</b>
</div> </div>
<div class=""> <div className="">
<p class="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]"> <p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
8GB - 9.000.000đ new White 8GB - 9.000.000đ new White
</p> </p>
<p class="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]"> <p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
8GB - 9.000.000đ new White 8GB - 9.000.000đ new White
</p> </p>
</div> </div>
<div> <div>
<a <a
href="" href=""
class="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600" className="block w-[130px] h-[40px] leading-[40px] m-[auto_0_auto_auto] text-base text-center text-white bg-orange-500 rounded hover:bg-orange-600"
> >
Liên hệ ngay Liên hệ ngay
</a> </a>
@@ -241,7 +249,7 @@ export function SupplierListBox() {
<a <a
href="" href=""
class="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600" className="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
> >
Xem thêm Xem thêm
</a> </a>

2
src/index.tsx
View File

@@ -4,6 +4,7 @@ import { Header } from "./components/header/Header";
import { Footer } from "./components/footer/Footer"; import { Footer } from "./components/footer/Footer";
import { Home } from "./pages/Home/index.jsx"; import { Home } from "./pages/Home/index.jsx";
import { ProductDetail } from "./pages/product/ProductDetail"; import { ProductDetail } from "./pages/product/ProductDetail";
import { Buildpc } from "./pages/buildpc/Buildpc";
import { NotFound } from "./pages/_404.jsx"; import { NotFound } from "./pages/_404.jsx";
export function App() { export function App() {
@@ -14,6 +15,7 @@ export function App() {
<Router> <Router>
<Route path="/" component={Home} /> <Route path="/" component={Home} />
<Route path="/product-detail" component={ProductDetail} /> <Route path="/product-detail" component={ProductDetail} />
<Route path="/buildpc" component={Buildpc} />
<Route default component={NotFound} /> <Route default component={NotFound} />
</Router> </Router>
<Footer /> <Footer />

116
src/pages/buildpc/Buildpc.tsx Normal file
View File

@@ -0,0 +1,116 @@
import { CreateBuildpc } from "../../components/buildpc/CreateBuildpc";
export function Buildpc() {
return (
<div className="page-buildpc bg-[#F4F4F4] pb-[100px]">
<div className="container">
<div className="breadcrumb p-[12px_0]">
<ol
itemscope
itemtype="http://schema.org/BreadcrumbList"
className="ul flex flex-wrap items-center"
>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a
href="/template/homepage/homepage.html"
itemprop="item"
className="nopad-l flex items-center text-[#637381]"
>
<span itemprop="name">
<span style="font-size: 0; display: none;">Trang chủ</span>
<i className="icon_2025 home mr-[5px] mb-[5px]" />
</span>
</a>{" "}
<i className="icon_2025 angle-right ml-[12px]" />
<meta itemprop="position" content="1" />
</li>
<li
itemprop="itemListElement"
itemscope
itemtype="http://schema.org/ListItem"
className="flex items-center pr-[12px]"
>
<a href="/" itemprop="item" className="nopad-l flex items-center">
<span itemprop="name">Tạo máy tính riêng của bạn</span>
</a>
<meta itemprop="position" content="2" />
</li>
</ol>
</div>
{/* <!-- Action Bar --> */}
<div className="flex gap-2 px-3 py-2.5 mt-3 text-base leading-none text-black bg-white rounded">
<div className="w-[615px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<a className="w-[24px] ml-[10px]" href="javascript:void()">
<i className="icon_2025 copy"></i>
</a>
<input
type="text"
className="w-full h-full p-[10px] outline-none"
value="https://bestpc.vn/restricted.php"
/>
</div>
<div className="w-[370px] h-[48px] rounded border border-solid border-neutral-200 flex items-center">
<p className="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
<input
type="text"
className="w-full h-full p-[10px] outline-none"
value=""
/>
</div>
<div className="grid grid-cols-3 gap-[10px] w-[calc(100%-615px-370px)]">
<a
href="javascript:void(0)"
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
>
<i className="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
<span className="ml-[5px]">Lịch sử</span>
</a>
<a
href="javascript:void(0)"
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
>
<i className="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
<span className="ml-[5px]">Tải xuống</span>
</a>
<a
href="javascript:void(0)"
className="w-full block h-[48px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group"
>
<i className="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
<span className="ml-[5px]">Làm mới</span>
</a>
</div>
</div>
<div className="bg-white p-[15px]">
<div className="flex items-center gap-2">
<a
href="/buildpc"
className="px-6 py-2.5 text-center font-bold text-white bg-violet-900 rounded"
>
Bắt đầu tạo
</a>
<a
href="/buildpc/compare"
className="px-6 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900"
>
So sánh giá tại các cửa hàng
</a>
</div>
{/* <!-- list button --> */}
<div className="content-tab" id="create-component">
<CreateBuildpc />
</div>
<div className="content-tab hidden" id="compare-component"></div>
</div>
</div>
</div>
);
}

499
src/pages/product/ProductDetail.tsx
View File

@@ -4,7 +4,6 @@ import { SupplierListBox } from "../../components/product/SupplierListBox";
import { ProductDescription } from "../../components/product/ProductDescription"; import { ProductDescription } from "../../components/product/ProductDescription";
import { MemberReview } from "../../components/product/MemberReview"; import { MemberReview } from "../../components/product/MemberReview";
import { ProductReview } from "../../components/product/ProductReview"; import { ProductReview } from "../../components/product/ProductReview";
import { FormReview } from "../../components/product/FormReview";
import { FreeMode, Navigation, Thumbs } from "swiper/modules"; import { FreeMode, Navigation, Thumbs } from "swiper/modules";
@@ -15,9 +14,6 @@ export function ProductDetail() {
const [thumbsSwiper, setThumbsSwiper] = useState(null); const [thumbsSwiper, setThumbsSwiper] = useState(null);
const prevButtonRef = useRef(null);
const nextButtonRef = useRef(null);
return ( return (
<> <>
<div className="box-product-detail bg-[#F4F4F4] pb-[100px]"> <div className="box-product-detail bg-[#F4F4F4] pb-[100px]">
@@ -118,8 +114,8 @@ export function ProductDetail() {
spaceBetween={15} spaceBetween={15}
slidesPerView={5} slidesPerView={5}
navigation={{ navigation={{
prevEl: prevButtonRef.current, // Link to the 'prev' button prevEl: "#btn-slider-small .swiper-button-prev", // Link to the 'prev' button
nextEl: nextButtonRef.current, // Link to the 'next' button nextEl: "#btn-slider-small .swiper-button-next", // Link to the 'next' button
}} }}
freeMode={true} freeMode={true}
watchSlidesProgress={true} watchSlidesProgress={true}
@@ -152,25 +148,9 @@ export function ProductDetail() {
<img src="/assets/images/small-product-detail.png" alt="" /> <img src="/assets/images/small-product-detail.png" alt="" />
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<div className="btn-small swiper-navigation"> <div className="btn-small" id="btn-slider-small">
<button <div className="swiper-button-next right-[-15px] w-[30px] h-[30px]"></div>
ref={prevButtonRef} <div className="swiper-button-prev left-[-15px] w-[30px] h-[30px]"></div>
className="swiper-button-prev"
style={{
position: "absolute",
left: "-15px",
zIndex: 10,
}}
></button>
<button
ref={nextButtonRef}
className="swiper-button-next"
style={{
position: "absolute",
right: "-20px",
zIndex: 10,
}}
></button>
</div> </div>
</div> </div>
</div> </div>
@@ -274,18 +254,18 @@ export function ProductDetail() {
<ProductDescription /> <ProductDescription />
{/* thông tin sản phẩm */} {/* thông tin sản phẩm */}
<div class="mt-5 bg-white rounded-[8px] p-[15px]"> <div className="mt-5 bg-white rounded-[8px] p-[15px]">
<div class="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<h3 class="text-xl font-bold">Sản phẩm tương tự</h3> <h3 className="text-xl font-bold">Sản phẩm tương tự</h3>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
class="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group" className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
> >
<span>Xem tất cả</span> <span>Xem tất cả</span>
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i> <i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
</a> </a>
</div> </div>
<div class="relative mt-[15px]"> <div className="relative mt-[15px]">
<Swiper <Swiper
slidesPerView={5} slidesPerView={5}
spaceBetween={15} spaceBetween={15}
@@ -299,308 +279,308 @@ export function ProductDetail() {
className="product-list swiper relative" className="product-list swiper relative"
> >
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<div class="btn-slider" id="js-product-similar-btn"> <div className="btn-slider" id="js-product-similar-btn">
<div class="swiper-button-next right-[-15px]"></div> <div className="swiper-button-next right-[-15px]"></div>
<div class="swiper-button-prev left-[-15px]"></div> <div className="swiper-button-prev left-[-15px]"></div>
</div> </div>
</div> </div>
</div> </div>
{/* sản phẩm tương tự */} {/* sản phẩm tương tự */}
<div class="mt-5 bg-white rounded-[8px] p-[15px]"> <div className="mt-5 bg-white rounded-[8px] p-[15px]">
<div class="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]"> <div className="flex items-center justify-between mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<h3 class="text-xl font-bold">Sản phẩm bạn có thể thích</h3> <h3 className="text-xl font-bold">Sản phẩm bạn có thể thích</h3>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
class="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group" className="text-[#462F91] flex items-center justify-center w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group"
> >
<span>Xem tất cả</span> <span>Xem tất cả</span>
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i> <i className="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
</a> </a>
</div> </div>
<div class="relative mt-[15px]"> <div className="relative mt-[15px]">
<Swiper <Swiper
slidesPerView={5} slidesPerView={5}
spaceBetween={15} spaceBetween={15}
@@ -614,298 +594,297 @@ export function ProductDetail() {
className="product-list swiper relative" className="product-list swiper relative"
> >
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
<SwiperSlide> <SwiperSlide>
<div class="product-item"> <div className="product-item">
<a href="" class="product-image"> <a href="" className="product-image">
<img <img
src="/assets/images/box-image.png" src="/assets/images/box-image.png"
alt="Laptop Dell" alt="Laptop Dell"
/> />
</a> </a>
<div class="info-product"> <div className="info-product">
<a href="" class="name-product line-clamp-2"> <a href="" className="name-product line-clamp-2">
Laptop văn phòng Dell RAM 8G Core i7 Laptop văn phòng Dell RAM 8G Core i7
</a> </a>
<div class="summary line-clamp-1"> <div className="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD Intel Core i5 / 8GB / 256GB / SSD
</div> </div>
<div class="locahost-pro flex items-center mb-[5px]"> <div className="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i> <i className="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Quận Thanh Xuân Quận Thanh Xuân
</span> </span>
</div> </div>
<div class="time-pro flex items-center mb-[5px]"> <div className="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i> <i className="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]"> <div className="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
11/04/2025 11/04/2025
</span> </span>
<span class="ml-[5px]">|</span> <span className="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]"> <span className="text-[#595959] ml-[5px] mt-[3px]">
Còn 01 ngày Còn 01 ngày
</span> </span>
</div> </div>
</div> </div>
<div class="price">15.000.000đ</div> <div className="price">15.000.000đ</div>
<div class="user-pro flex items-center"> <div className="user-pro flex items-center">
<img <img
src="/assets/images/avartar.png" src="/assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" className="w-[24px] h-[24px] block rounded-[50%]"
width="24px" width="24px"
height="24px" height="24px"
alt="avartar" alt="avartar"
/> />
<b class="ml-[7px]">Thanh Mai</b> <b className="ml-[7px]">Thanh Mai</b>
</div> </div>
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<div class="btn-slider" id="js-product-like-btn"> <div className="btn-slider" id="js-product-like-btn">
<div class="swiper-button-next right-[-15px]"></div> <div className="swiper-button-next right-[-15px]"></div>
<div class="swiper-button-prev left-[-15px]"></div> <div className="swiper-button-prev left-[-15px]"></div>
</div> </div>
</div> </div>
</div> </div>
{/* sản phẩm yêu thích */} {/* sản phẩm yêu thích */}
</div> </div>
</div> </div>
<FormReview />
</> </>
); );
} }