upload 28/5
This commit is contained in:
@@ -19,4 +19,4 @@
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
8375
old/package-lock.json
generated
8375
old/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fancyapps/ui": "^5.0.36",
|
||||
"preact": "^10.26.6",
|
||||
"preact-iso": "^2.9.1",
|
||||
"react-fancybox": "^1.0.2",
|
||||
"react-slick": "^0.30.3",
|
||||
"swiper": "^11.2.6",
|
||||
"tailwindcss": "^4.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.9.3",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-preact": "^1.5.0",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.0.4"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "preact"
|
||||
}
|
||||
}
|
||||
@@ -1,289 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { PopupBuildpc } from "../../components/buildpc/PopupBuildpc";
|
||||
|
||||
export function CreateBuildpc() {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
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="/buildpc/detail"
|
||||
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="/buildpc/detail"
|
||||
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="/buildpc/detail"
|
||||
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="/buildpc/detail"
|
||||
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="/buildpc/detail"
|
||||
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="/buildpc/detail"
|
||||
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)"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
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)"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
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)"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowPopup(true);
|
||||
}}
|
||||
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 --> */}
|
||||
|
||||
<PopupBuildpc show={showPopup} onClose={() => setShowPopup(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,229 +0,0 @@
|
||||
export function ListCompare() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,832 +0,0 @@
|
||||
export function PopupBuildpc({ show, onClose }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="backgroundPopup"
|
||||
className={`${show ? "active" : ""}`}
|
||||
onClick={onClose}
|
||||
></div>
|
||||
<div
|
||||
className={`fixed w-[1400px] bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999] ${
|
||||
show ? "" : "hidden"
|
||||
}`}
|
||||
id="js-modal-popup"
|
||||
>
|
||||
<div className="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
|
||||
<b className="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>
|
||||
|
||||
<div className="w-[calc(100%-275px)] relative input-search">
|
||||
<form
|
||||
action="/search"
|
||||
enctype="text/plain"
|
||||
method="get"
|
||||
className="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Bạn cần tìm linh kiện gì..."
|
||||
className="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"
|
||||
>
|
||||
<i className="icon_2025 search "></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={onClose}
|
||||
className="w-[54px] flex items-center justify-end"
|
||||
>
|
||||
<i className="icon_2025 close brightness-0 invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="content-popup p-[10px] bg-white">
|
||||
<div className="flex gap-[15px]">
|
||||
<div className="left w-[205px]">
|
||||
<b className="">230 sản phẩm</b>
|
||||
<div className="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
||||
<b className="text-xl">Bộ lọc</b>
|
||||
<i className="icon_2025 filter"></i>
|
||||
</div>
|
||||
<div className="list-filter h-[calc(100vh-208px)] overflow-auto">
|
||||
<div className="item-filter mb-2.5">
|
||||
<h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div className="mt-2.5 text-base leading-8 text-black">
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle1"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle1"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle2"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle2"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle3"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle3"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle4"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle4"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle5"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle5"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
Máy tính dành cho
|
||||
</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-filter mb-2.5">
|
||||
<h3 className="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div className="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle1"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle1"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
All
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle2"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle2"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
32gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle3"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle3"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
64bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle4"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle4"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
16bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle5"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle5"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
12gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
4gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
2gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
24gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle2"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle2"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
32gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle3"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle3"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
64bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle4"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle4"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
16bg
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle5"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle5"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
12gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
4gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
2gb
|
||||
</label>
|
||||
</a>
|
||||
<a href="" className="item flex items-center ">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="vehicle6"
|
||||
className="checkbox"
|
||||
/>
|
||||
<label
|
||||
for="vehicle6"
|
||||
className="ml-2 line-clamp-1 w-[calc(100%-28px)]"
|
||||
>
|
||||
24gb
|
||||
</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right w-[calc(100%-220px)]">
|
||||
<div className="flex gap-[15px]">
|
||||
<a href="" className="text-[var(--color-hover)]">
|
||||
Chọn tất cả
|
||||
</a>
|
||||
<a href="">Bỏ chọn tất cả</a>
|
||||
<a href="">So sánh sản phẩm đã chọn</a>
|
||||
</div>
|
||||
<div className="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
||||
<b className="col-span-3 text-center">Tên</b>
|
||||
<b>Dung lượng</b>
|
||||
<b>Thế hệ</b>
|
||||
<b>Bộ nhớ</b>
|
||||
<b>Độ ồn</b>
|
||||
<b>Màu sắc</b>
|
||||
<b>Đánh giá</b>
|
||||
<b className="col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
<div className="list mt-3 h-[calc(100vh-208px)] overflow-auto">
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox w-[24px] mx-[20px]"
|
||||
/>
|
||||
<a
|
||||
href=""
|
||||
className="image w-[50px] h-[50px] 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%-140px)] hover:text-[var(--color-hover)]"
|
||||
>
|
||||
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">8bg</div>
|
||||
<div className="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div className="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon_star star4"></i>
|
||||
<span className="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center justify-between">
|
||||
<div className="price">3.400.000đ</div>
|
||||
<a
|
||||
href=""
|
||||
className="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]"
|
||||
>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t-[11px] border-[#1c039b] w-full">
|
||||
<div className="container">
|
||||
<a href="/" className="block my-[30px]">
|
||||
<img
|
||||
src="/assets/images/logo-footer.png"
|
||||
className="block w-[180px] h-[45px] object-contain"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
<div className="main-footer grid grid-cols-4">
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Về chúng tôi</h3>
|
||||
<a href="" className="block">
|
||||
Độc quyền
|
||||
</a>
|
||||
<a href="" className="block">
|
||||
Mua online
|
||||
</a>
|
||||
<a href="" className="block">
|
||||
Bộ sưu tập
|
||||
</a>
|
||||
<a href="/tin-tuc" className="block">
|
||||
Blog
|
||||
</a>
|
||||
<div className="list-social flex items-center mt-[45px]">
|
||||
<a href="" target="_blank" className="mr-[10px]">
|
||||
<i className="icon_2025 facebook"></i>
|
||||
</a>
|
||||
<a href="" target="_blank">
|
||||
<i className="icon_2025 zalo"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Tuyển dụng</h3>
|
||||
<a href="">Liên hệ</a>
|
||||
<a href="">Điều khoản</a>
|
||||
<a href="">Chính sách bảo mật</a>
|
||||
<a href="">Trở thành đối tác</a>
|
||||
</div>
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Liên kết</h3>
|
||||
<a href="hurasoft.com">Hurasoft.com</a>
|
||||
</div>
|
||||
<div className="item">
|
||||
<h3 className="title font-bold">Giới thiệu</h3>
|
||||
<b className="text-[16px]">
|
||||
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
|
||||
hàng laptop, thiết bị điện tử, máy tính, xây dựng cấu hình PC
|
||||
chuyên nghiệp. Và còn rất nhiều mã giảm giá độc quyền dành riêng
|
||||
cho bạn.
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom bg-[#ebebeb] py-[15px]">
|
||||
<b className="text-center block">
|
||||
© Copyright 2025 by Hurasoft. All Rights Reserved.
|
||||
</b>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,859 +0,0 @@
|
||||
export function Header() {
|
||||
return (
|
||||
<header class="w-full">
|
||||
<div class="header-main px-[10px] py-6 bg-[var(--color-global)]">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="/" class="logo block mr-[100px]">
|
||||
<img
|
||||
src="/assets/images/logo.png"
|
||||
class="object-contain w-[173px] h-[45px] block"
|
||||
alt="Location icon"
|
||||
/>
|
||||
</a>
|
||||
<div class="flex items-center mr-[100px]">
|
||||
<i class="icon_2025 map"></i>
|
||||
<div class="ml-[20px] ">
|
||||
<span class="text-xs text-white block mb-[5px]">
|
||||
Bạn đang ở
|
||||
</span>
|
||||
<div class="box-select">
|
||||
<select name="" id="" class="select select_location">
|
||||
<option value="">Hà Nội</option>
|
||||
<option value="">TP HCM</option>
|
||||
<option value="">Đà Nẵng</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[670px] relative mr-[135px] input-search">
|
||||
<form
|
||||
action="/search"
|
||||
enctype="text/plain"
|
||||
method="get"
|
||||
class="relative w-full h-[45px] bg-white rounded-[8px] overflow-hidden"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Tìm kiếm khuyến mãi, cửa hàng, sản phẩm,..."
|
||||
class="search-input w-full h-full p-[0_10px] rounded-[8px] text-base"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="absolute right-[10px] top-[5px] w-[40px] h-[35px] border-l-[1.5px] border-[#B3B3B3] pl-[10px]"
|
||||
>
|
||||
<i class="icon_2025 search "></i>
|
||||
</button>
|
||||
</form>
|
||||
<div class="autocomplete-suggestions hidden">
|
||||
<p>TỪ KHOÁ HOT</p>
|
||||
<ul class="ul">
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> laptop </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-user">
|
||||
<div class="flex items-center">
|
||||
<i class="icon_2025 user"></i>
|
||||
<b class="text-white p-[0_5px] whitespace-nowrap">Tài khoản</b>
|
||||
<i class="icon_arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Navigation Section */}
|
||||
<nav class="header-bottom px-[10px] py-2.5 w-full bg-white shadow-[0px_4px_4px_rgba(149,149,149,0.25)]">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="header-menu relative group">
|
||||
<div class="title-menu flex items-center justify-center w-[219px] h-[45px] rounded-[4px] border-[1px] border-[#e3e3e3] bg-[#F6F6F6] cursor-pointer">
|
||||
<i class="icon_2025 bar"></i>
|
||||
<b class="ml-[8px] uppercase">Danh mục sản phẩm</b>
|
||||
</div>
|
||||
<div class="box-menu-hover group-hover:block absolute hidden shadow-[0_0_8px_2px_rgba(0,0,0,0.1)] rounded-[5px] bg-white top-[47px] z-[99] w-[220px]">
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/laptop.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/008-mouse.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/010-computer.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/013-fan.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/danh-muc-cap2.html"> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/laptop.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/008-mouse.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/010-computer.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/013-fan.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/gamepad-1.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="/danh-muc-cap1.html" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<a href="" class="flex items-center">
|
||||
<span class="cate-img">
|
||||
{" "}
|
||||
<img src="/dev/images/server-4.png" alt="" />{" "}
|
||||
</span>
|
||||
<span class="cate-name"> Laptop & phụ kiện</span>
|
||||
</a>
|
||||
|
||||
<div class="sub-menu">
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul sub-cate">
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Laptop 2 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""> Phụ kiện 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* end copy */}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-[40px] header-bottom-right">
|
||||
<a href="/buildpc" class="flex items-center group">
|
||||
<i class="icon_2025 buildpc"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Build PC
|
||||
</span>
|
||||
</a>
|
||||
<a href="/tim-nguoi-ban" class="flex items-center group">
|
||||
<i class="icon_2025 shop"></i>
|
||||
<span class="ml-[7px] hover:text-[var(--color-global)]">
|
||||
Tìm người bán
|
||||
</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<i class="icon_2025 map-2 "></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Địa chỉ sửa chữa
|
||||
</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<i class="icon_2025 question"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Hỏi đáp
|
||||
</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<i class="icon_2025 prduct-save"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Sản phẩm đã lưu
|
||||
</span>
|
||||
</a>
|
||||
<a href="/" class="flex items-center group">
|
||||
<i class="icon_2025 article"></i>
|
||||
<span class="ml-[7px] group-hover:text-[var(--color-global)]">
|
||||
Tin rạo vặt
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
export function FormReview({ show, onClose }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div className="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<b className="text-center text-xl block">Đánh giá sản phẩm</b>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
onClick={onClose}
|
||||
id="js-close-review"
|
||||
className="absolute right-0 top-0 text-[#808080] text-[22px] "
|
||||
>
|
||||
<i class="icon_2025 close"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="info-form-review w-[500px] mx-[auto]">
|
||||
<a
|
||||
href=""
|
||||
className="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="block w-[100px] h-[100px] m-[0_auto]"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a href="" className="text-center block mb-[10px]">
|
||||
Laptop Gaming Asus TUF FX505GE-BQ037T Core i7-8750H/Win10(15.6" FHD)
|
||||
- Hàng Chính Hãng
|
||||
</a>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<div className="rating-selection">
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="star5"
|
||||
name="rating"
|
||||
value="5"
|
||||
/>
|
||||
<label for="star5" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="star4"
|
||||
name="rating"
|
||||
value="4"
|
||||
/>
|
||||
<label for="star4" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="star3"
|
||||
name="rating"
|
||||
value="3"
|
||||
/>
|
||||
<label for="star3" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="star2"
|
||||
name="rating"
|
||||
value="2"
|
||||
/>
|
||||
<label for="star2" className="rating-star"></label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
className="rating-input"
|
||||
id="star1"
|
||||
name="rating"
|
||||
value="1"
|
||||
/>
|
||||
<label for="star1" className="rating-star"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="clearfix"></div>
|
||||
</div>
|
||||
<div className="form-input mt-[20px]">
|
||||
<input
|
||||
type="text"
|
||||
name="title"
|
||||
placeholder="Mời bạn nhập tiêu đề..."
|
||||
/>
|
||||
<div className="note-error"></div>
|
||||
</div>
|
||||
<div className="form-input mt-[10px]">
|
||||
<textarea
|
||||
name="content"
|
||||
placeholder="Mời bạn chia sẻ cảm nhận..."
|
||||
id=""
|
||||
></textarea>
|
||||
<div className="note-error"></div>
|
||||
</div>
|
||||
<input id="js-file-upload-id" type="hidden" value="" />
|
||||
<div id="js-container-selector" className="mt-[10px] flex items-center">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="flex items-center"
|
||||
id="js-select-file"
|
||||
>
|
||||
<i className="icon_2025 upload_image"></i>
|
||||
<span className="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
|
||||
<span className="px-[5px]">(tối đa 3 ảnh)</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]"
|
||||
>
|
||||
Gửi đánh giá
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,311 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { FormReview } from "../../components/product/FormReview";
|
||||
|
||||
export function MemberReview() {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<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
|
||||
name=""
|
||||
id=""
|
||||
className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Top review</option>
|
||||
<option value="">Review mới nhất</option>
|
||||
</select>
|
||||
<i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-[25px]">
|
||||
<div className="left w-[20%]">
|
||||
<b className="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
54 đánh giá
|
||||
</b>
|
||||
<div className="flex items-center justify-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.8</span>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star5"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star3"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star2"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<i className="icon-star star1"></i>
|
||||
<span>50 đánh giá</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p className="text-center mt-[10px]">
|
||||
Đánh giá của bạn về sản phẩm
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
id="js-show-form"
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right w-[80%]">
|
||||
<div className="list-review mt-[15px]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-1.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div className="time mt-[10px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p className="content mb-[5px]">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a
|
||||
type specimen book. I
|
||||
</p>
|
||||
<div className="flex items-center mb-[10px]">
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
data-fancybox="gallery"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="btn">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="text-[#1877F2] mr-[10px]"
|
||||
>
|
||||
Bình luận{" "}
|
||||
<span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" className="text-[#1877F2]">
|
||||
Thích <span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-2.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div className="time mt-[10px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p className="content mb-[5px]">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a
|
||||
type specimen book. I
|
||||
</p>
|
||||
<div className="flex items-center mb-[10px]">
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
data-fancybox="gallery"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="btn">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="text-[#1877F2] mr-[10px]"
|
||||
>
|
||||
Bình luận{" "}
|
||||
<span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" className="text-[#1877F2]">
|
||||
Thích <span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<img
|
||||
src="/assets/images/avartar-review-3.png"
|
||||
width="75px"
|
||||
height="75px"
|
||||
alt="avartar"
|
||||
/>
|
||||
<div className="time mt-[10px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p className="content mb-[5px]">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a
|
||||
type specimen book. I
|
||||
</p>
|
||||
<div className="flex items-center mb-[10px]">
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
data-fancybox="gallery"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="/src/assets/images/small-product-detail.png"
|
||||
className="w-[80px] block mr-[10px]"
|
||||
data-fancybox="gallery"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/small-product-detail.png"
|
||||
className="w-[100%] block"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="btn">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="text-[#1877F2] mr-[10px]"
|
||||
>
|
||||
Bình luận{" "}
|
||||
<span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" className="text-[#1877F2]">
|
||||
Thích <span className="ml-[3px] text-black">(23)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end list review */}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
>
|
||||
Xem thêm <span>23</span> bình luận khác
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormReview show={showForm} onClose={() => setShowForm(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,447 +0,0 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Fancybox } from "@fancyapps/ui";
|
||||
import "@fancyapps/ui/dist/fancybox/fancybox.css";
|
||||
|
||||
export function ProductDescription() {
|
||||
const [isContentExpanded, setContentExpanded] = useState(false);
|
||||
const contentRef = useRef(null);
|
||||
const moreAllRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const content = contentRef.current;
|
||||
if (content && content.scrollHeight >= 580) {
|
||||
moreAllRef.current.style.display = "flex";
|
||||
content.style.height = "580px";
|
||||
}
|
||||
|
||||
Fancybox.bind('[data-fancybox="gallery"]');
|
||||
}, []);
|
||||
|
||||
const toggleContent = () => {
|
||||
setContentExpanded((prevState) => !prevState);
|
||||
const content = contentRef.current;
|
||||
content.classList.toggle("active");
|
||||
|
||||
if (isContentExpanded) {
|
||||
window.scrollTo({
|
||||
top: content.getBoundingClientRect().top + window.scrollY - 200,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="product-information mt-5">
|
||||
<div className="flex gap-[15px]">
|
||||
<div className="left w-[60%]">
|
||||
<div className="box-desc bg-white p-[12px] rounded-[8px]">
|
||||
<h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
Thông tin sản phẩm
|
||||
</h3>
|
||||
<div id="content-desciption">
|
||||
<div className="content nd" ref={contentRef}>
|
||||
<p style="text-align: justify;">
|
||||
<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ó
|
||||
được trải nghiệm chơi game, làm việc hiệu quả. Mẫu{" "}
|
||||
<a
|
||||
href="https://cellphones.com.vn/laptop/hp/victus.html"
|
||||
title="HP Victus"
|
||||
target="_blank"
|
||||
>
|
||||
<strong>HP Victus</strong>
|
||||
</a>{" "}
|
||||
này còn được trang bị màn hình 16 inch FHD 165Hz giúp tái tạo
|
||||
hình ảnh sắc nét, mượt mà. Kèm theo đó là thiết kế bền bỉ,
|
||||
hiện đại để có thể sử dụng ở nhiều không gian.
|
||||
</p>
|
||||
|
||||
<h2
|
||||
style="scroll-margin : 154px;"
|
||||
id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong"
|
||||
>
|
||||
<strong>
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ,
|
||||
hiển thị ấn tượng
|
||||
</strong>
|
||||
</h2>
|
||||
<p style="text-align: justify;">
|
||||
HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card đồ họa
|
||||
rời mạnh mẽ sẽ mang tới trải nghiệm chơi game, làm việc mượt
|
||||
mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm nổi bật mà mẫu
|
||||
laptop gaming của
|
||||
<strong> HP Victus </strong> này sở hữu trong bài viết sau.
|
||||
</p>
|
||||
<h3
|
||||
style="scroll-margin : 154px;"
|
||||
id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx"
|
||||
>
|
||||
<strong>
|
||||
{" "}
|
||||
Nâng cao hiệu suất xử lý với chip Core i7 13700HX
|
||||
</strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị con chip xử
|
||||
lý Core i7 13700HX của Intel. Con chip Core i7 16 lõi, 24
|
||||
luồng này sở hữu khả năng ép xung cực đại lên tới 5GHz để luôn
|
||||
có thể xử lý dữ liệu trong thời gian ngắn. Với bộ nhớ đệm
|
||||
30MB, hiệu suất xử lý các tác vụ phức tạp của laptop sẽ được
|
||||
giảm đi đáng kể.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
<img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
|
||||
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA"
|
||||
loading="lazy"
|
||||
/>
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị cho phiên
|
||||
bản{" "}
|
||||
<a
|
||||
href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
|
||||
title="laptop Victus 16"
|
||||
target="_blank"
|
||||
>
|
||||
<strong>laptop Victus 16</strong>
|
||||
</a>
|
||||
này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ vậy
|
||||
mà người dùng có thể tự tin trải nghiệm các tựa game với mức
|
||||
cấu hình cao. Không dừng ở đó, các nhu cầu chỉnh sửa hình ảnh,
|
||||
dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện
|
||||
mượt mà.
|
||||
</p>
|
||||
<h3
|
||||
style="scroll-margin : 154px;"
|
||||
id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon"
|
||||
>
|
||||
<strong>
|
||||
{" "}
|
||||
Tích hợp ổ cứng tốc độ cao cùng dung lượng RAM lớn{" "}
|
||||
</strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">
|
||||
HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2 thanh RAM
|
||||
chuẩn DDR5 có tốc độ bus lên tới 4800MT/s. Với tổng dung lượng
|
||||
RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng tốt nhu cầu đa
|
||||
nhiệm. Không chỉ các tác vụ cơ bản mà nhu cầu đa nhiệm nâng
|
||||
cao trong công việc cũng sẽ được thực hiện mượt mà mà không
|
||||
cần phải nâng cấp cấu hình. Ngoài ra, laptop HP Victus 16
|
||||
R0376TX AY8Z2PA còn sở hữu một ổ cứng SSD tốc độ cao có dung
|
||||
lượng 512GB.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
<img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
|
||||
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA"
|
||||
loading="lazy"
|
||||
/>
|
||||
</p>
|
||||
<h3
|
||||
style="scroll-margin : 154px;"
|
||||
id="thiet-ke-hien-dai-ben-bi"
|
||||
>
|
||||
<strong> Thiết kế hiện đại, bền bỉ </strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">
|
||||
Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế hướng tới
|
||||
phong cách hiện đại, tối giản. Tuy vậy nhưng sản phẩm vẫn mang
|
||||
đậm dấu ấn gaming với tông màu đen thu hút và mạnh mẽ. Kèm
|
||||
theo đó là một tổng thể chắc chắn, bền bỉ cùng phần bản lề
|
||||
kích thước lớn.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể tiện lợi
|
||||
mang theo phiên bản laptop HP Victus này mà không gặp bất
|
||||
tiện. So với các mẫu laptop gaming khác, đây được coi là một
|
||||
điểm cộng giúp sản phẩm đáp ứng nhu cầu chơi game ở nhiều
|
||||
không gian của người dùng.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
<img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
|
||||
alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA"
|
||||
loading="lazy"
|
||||
/>
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP đã trang bị
|
||||
cho laptop Victus 16 R0376TX AY8Z2PA bộ bàn phím Full-size.
|
||||
Với phần bàn phím số riêng biệt, người dùng sẽ cải thiện được
|
||||
tốc độ nhập liệu trong khi làm việc. Bàn phím của laptop còn
|
||||
được tích hợp hệ thống đèn nền RGB 1 để hỗ trợ việc gõ phím
|
||||
trong điều kiện thiếu sáng.
|
||||
</p>
|
||||
<h3
|
||||
style="scroll-margin : 154px;"
|
||||
id="hien-thi-sac-net-va-muot-ma"
|
||||
>
|
||||
<strong> Hiển thị sắc nét và mượt mà </strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không giản hiển thị
|
||||
cực lớn khi được trang bị màn hình có kích thước 16.1 inch.
|
||||
Kèm theo đó là độ phân giải FHD (1920 x 1080p) giúp nội dung
|
||||
hiển thị luôn có được độ rõ nét. Nhờ việc sử dụng tấm nền IPS,
|
||||
người dùng còn có thể điều chỉnh góc nghiêng linh hoạt mà
|
||||
không gây ảnh hưởng tới chất lượng hình ảnh.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
<img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
|
||||
alt="Hiển thị sắc nét và mượt mà"
|
||||
loading="lazy"
|
||||
/>
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Điểm nổi bật có trên màn hình HP Victus 16 R0376TX AY8Z2PA
|
||||
chính là tần số quét và độ phủ màu. Với độ phủ màu 100% sRGB,
|
||||
mẫu laptop gaming HP này sẽ hỗ trợ người dùng làm các công
|
||||
việc liên quan tới sáng tạo hiệu quả. Tần số quét ở mức 165Hz
|
||||
sẽ giúp màn hình tái hiện các chuyển động một cách uyển
|
||||
chuyển, mượt mà.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn được phủ
|
||||
lớp chống chói và có độ sáng 300 nits để thoải mái sử dụng ở
|
||||
những nơi có ánh sáng mạnh. Với chuẩn Low Blue Light, màn hình
|
||||
còn giảm thiểu lượng ánh sáng xanh phát ra để hạn chế tình
|
||||
trạng mỏi mắt khi sử dụng laptop trong thời gian dài.
|
||||
</p>
|
||||
<h3
|
||||
style="scroll-margin : 154px;"
|
||||
id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh"
|
||||
>
|
||||
<strong>
|
||||
{" "}
|
||||
Thời lượng pin dài, kết nối phong phú và ổn định{" "}
|
||||
</strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị viên pin
|
||||
Li-ion Polymer 4-cell có dung lượng ở mức 70Wh. Với dung lượng
|
||||
này, viên pin có thể duy trì trạng thái hoạt động cho laptop
|
||||
lên tới nhiều giờ với các tác vụ hỗn hợp. Laptop còn được
|
||||
trang bị bộ nguồn 200W Smart AC power adapter để hỗ trợ sạc
|
||||
pin nhanh 50% trong khoảng 30 phút.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
<img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
|
||||
alt="Thời lượng pin dài, kết nối phong phú và ổn định"
|
||||
loading="lazy"
|
||||
/>
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu, HP còn
|
||||
trang bị cho mẫu laptop Victus của hàng đầy đủ các cổng kết
|
||||
nối thông dụng. Hai cạnh bên laptop được tích hợp các cổng USB
|
||||
Type-A, USB Type-C, RJ-45, HDMI 2.1, jack audio 3.5mm và bộ
|
||||
chuyển đổi điện xoay chiều thông minh.
|
||||
</p>
|
||||
<p style="text-align: justify;">
|
||||
Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị card
|
||||
wireless Bluetooth 5.3 và Intel Wi-Fi 6E AX211 (2x2). Điều này
|
||||
sẽ đảm bảo được khả năng kết nối với các thiết bị ngoại vi,
|
||||
kết nối mạng ổn định, nhanh chóng cho laptop.
|
||||
</p>
|
||||
<h2
|
||||
style="scroll-margin : 154px;"
|
||||
id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones"
|
||||
>
|
||||
<strong>
|
||||
{" "}
|
||||
Mua laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại
|
||||
CellphoneS{" "}
|
||||
</strong>
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Hãy tới ngay các cửa hàng CellphoneS trên cả nước để trải
|
||||
nghiệm và đặt mua{" "}
|
||||
<strong>Laptop HP Victus 16 R0376TX AY8Z2PA </strong> . Mẫu
|
||||
laptop gaming HP này còn có mức giá cực kỳ hấp dẫn khi đi
|
||||
kèm nhiều chương trình ưu đãi, hỗ trợ thu cũ - đổi mới,...
|
||||
</li>
|
||||
<li>
|
||||
Với chính sách hỗ trợ trả góp lãi suất thấp, khách hàng sẽ
|
||||
còn dễ dàng sở hữu và trải nghiệm chiếc laptop này. Ngoài
|
||||
ra, CellphoneS còn hỗ trợ giao hàng toàn quốc để khách hàng
|
||||
tiện lợi đặt mua dù ở nơi đâu.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
ref={moreAllRef}
|
||||
className="more-all js-viewmore-content item-btn flex items-center"
|
||||
onClick={toggleContent}
|
||||
>
|
||||
{isContentExpanded ? (
|
||||
<>
|
||||
<span>Thu gọn</span>{" "}
|
||||
<i className="icon_2025 angle-top mt-[10px]"></i>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>Xem thêm </span>
|
||||
<i className="icon_2025 angle-bottom"></i>
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- end box desc --> */}
|
||||
</div>
|
||||
<div className="right w-[40%]">
|
||||
<div className="box-spec bg-white p-[12px] rounded-[8px]">
|
||||
<h3 className="title text-2xl block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1] font-bold">
|
||||
Thông tin chi tiết
|
||||
</h3>
|
||||
|
||||
<div className="content table">
|
||||
<table width="638">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mã sản phẩm</td>
|
||||
<td>VA3416WC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc</td>
|
||||
<td>Đen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ sáng</td>
|
||||
<td>Max 300cd/m²</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ tương phản</td>
|
||||
<td>3000:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hiển thị</td>
|
||||
<td>16.7M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hỗ trợ</td>
|
||||
<td>6500K</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loại màn hình</td>
|
||||
<td>Cong R1500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kích cỡ màn hình</td>
|
||||
<td>34"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tấm nền</td>
|
||||
<td>VA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Góc nhìn</td>
|
||||
<td>89°/89° (H/V)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tính năng đặc biệt</td>
|
||||
<td>
|
||||
<br />
|
||||
1. Flicker-Free Backlight adjustment
|
||||
<br />
|
||||
2. Dynamic Contrast Ratio: DCR
|
||||
<br />
|
||||
3. Adaptive Sync
|
||||
<br />
|
||||
4.FPS/RTS
|
||||
<br />
|
||||
5.PIP/PBP
|
||||
<br />
|
||||
6. PQ
|
||||
<br />
|
||||
7. GAME PLUS
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="content-specification" className="hidden table">
|
||||
<table width="638">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mã sản phẩm</td>
|
||||
<td>VA3416WC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc</td>
|
||||
<td>Đen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ sáng</td>
|
||||
<td>Max 300cd/m²</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Độ tương phản</td>
|
||||
<td>3000:1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hiển thị</td>
|
||||
<td>16.7M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Màu sắc hỗ trợ</td>
|
||||
<td>6500K</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loại màn hình</td>
|
||||
<td>Cong R1500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kích cỡ màn hình</td>
|
||||
<td>34"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tấm nền</td>
|
||||
<td>VA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Góc nhìn</td>
|
||||
<td>89°/89° (H/V)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tính năng đặc biệt</td>
|
||||
<td>
|
||||
<br />
|
||||
1. Flicker-Free Backlight adjustment
|
||||
<br />
|
||||
2. Dynamic Contrast Ratio: DCR
|
||||
<br />
|
||||
3. Adaptive Sync
|
||||
<br />
|
||||
4.FPS/RTS
|
||||
<br />
|
||||
5.PIP/PBP
|
||||
<br />
|
||||
6. PQ
|
||||
<br />
|
||||
7. GAME PLUS
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<a
|
||||
href="#content-specification"
|
||||
data-fancybox
|
||||
className="more-all flex items-center justify-center"
|
||||
>
|
||||
Xem thêm thông số <i className="icon_2025 angle-bottom"></i>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- box spec --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,192 +0,0 @@
|
||||
export function ProductReview() {
|
||||
return (
|
||||
<div className="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 className="text-xl font-bold">Đánh giá trên internet</h3>
|
||||
<div className="select-sort relative border border-[#b1b1b1] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
className=" appearance-none w-full relative p-[0_20px_0_10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Top review</option>
|
||||
<option value="">Review mới nhất</option>
|
||||
</select>
|
||||
<i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-[25px]">
|
||||
<div className="left w-[20%]">
|
||||
<b className="text-center block pt-[20px] pb-[5px] text-2xl">
|
||||
54 đánh giá
|
||||
</b>
|
||||
<div className="flex items-center justify-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.8</span>
|
||||
</div>
|
||||
<div className="border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[10px]">
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Hanoicomputer{" "}
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i className="icon-star star5"></i>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Anphatpc{" "}
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i className="icon-star star4"></i>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Mygear{" "}
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i className="icon-star star3"></i>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Hoangphatpc{" "}
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i className="icon-star star2"></i>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-[10px]">
|
||||
<span>
|
||||
Phucanhpc{" "}
|
||||
<a href="" className="ml-[5px] text-[#1877F2]">
|
||||
(240)
|
||||
</a>
|
||||
</span>
|
||||
<i className="icon-star star1"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="btn border-t-[1px] border-[#E4E4E4] pt-[10px] mt-[20px]">
|
||||
<p className="text-center mt-[10px]">
|
||||
Đánh giá của bạn về sản phẩm
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right w-[80%]">
|
||||
<div className="list-review mt-[15px]">
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" className="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div className="time mt-[5px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p className="content mb-[5px] text-base">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
</p>
|
||||
<a href="javascript:void(0)" className="flex items-start">
|
||||
<span className="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i className="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" className="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div className="time mt-[5px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p className="content mb-[5px] text-base">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
</p>
|
||||
<a href="javascript:void(0)" className="flex items-start">
|
||||
<span className="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i className="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div className="w-[80px] mr-[20px]">
|
||||
<a href="hacom.vn" target="_blank" className="text-[#1877F2]">
|
||||
Hacom.vn
|
||||
</a>
|
||||
<div className="time mt-[5px]">
|
||||
<b className="mb-[2px] text-center block">Dino</b>
|
||||
<p className="text-center">10:00pm 20/02/2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(100%-100px)]">
|
||||
<div className="flex items-center mb-[5px]">
|
||||
<i className="icon-star star4"></i>
|
||||
<b className="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
|
||||
</div>
|
||||
<p className="content mb-[5px] text-base">
|
||||
Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting industry. Lorem Ipsum has been the industry's
|
||||
standard dummy text ever since the 1500s, when an unknown
|
||||
printer took a galley of type and scrambled it to make a type
|
||||
specimen book. I
|
||||
</p>
|
||||
<a href="javascript:void(0)" className="flex items-start">
|
||||
<span className="text-[16px] mr-[7px] underline">
|
||||
Xem link nguồn
|
||||
</span>
|
||||
<i className="icon_2025 link-review"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end list review */}
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
className="pt-[15px] text-[#FF7A00] btn-more-review"
|
||||
>
|
||||
Xem thêm <span>23</span> bình luận khác
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,258 +0,0 @@
|
||||
export function SupplierListBox() {
|
||||
return (
|
||||
<div className="p-[15px] bg-white mt-5 rounded-[8px]">
|
||||
<div className="flex items-center justify-between pb-[15px] border-b-[1px] border-[#B1B1B1]">
|
||||
<h3 className="text-xl font-bold">
|
||||
Nhà cung cấp trên BestPC - Tại Hà Nội
|
||||
</h3>
|
||||
<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
|
||||
type="text"
|
||||
placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
|
||||
className="outline-none ml-[5px] h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="select-sort relative border border-[#b1b1b1] w-[100px] h-[45px] rounded-[4px] overflow-hidden">
|
||||
<select
|
||||
name=""
|
||||
id=""
|
||||
className=" appearance-none w-full relative pl-[10px] bg-transparent h-full z-[2]"
|
||||
>
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Mới</option>
|
||||
</select>
|
||||
<i className="icon_2025 angle-right ml-[5px] absolute right-[7px] top-[12px] z-[1] rotate-[90deg]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-[10px] py-[15px] grid grid-cols-5 text-xl border-b-[1px] border-[#D9D9D9]">
|
||||
<div>
|
||||
<b>Nhà cung cấp</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Chính sách vận chuyển</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Giá</b>
|
||||
</div>
|
||||
<div>
|
||||
<b>Sản phẩm</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="list ">
|
||||
<div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="flex items-start supplier">
|
||||
<div className="logo mr-[10px]">
|
||||
<div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
className="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<i className="icon_2025 map-4"></i>
|
||||
<span className="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" className="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" className="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="price">
|
||||
<div className="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b className="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b className="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="flex items-start supplier">
|
||||
<div className="logo mr-[10px]">
|
||||
<div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
className="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<i className="icon_2025 map-4"></i>
|
||||
<span className="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" className="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" className="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="price">
|
||||
<div className="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b className="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b className="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="item grid grid-cols-5 py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
<div className="flex items-start supplier">
|
||||
<div className="logo mr-[10px]">
|
||||
<div className="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
|
||||
<img
|
||||
src="/assets/images/logo-hacom.png"
|
||||
className="block w-full h-full object-contain m-[0_auto]"
|
||||
width="100%"
|
||||
height="100%"
|
||||
alt="hacom"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center mt-2">
|
||||
<i className="icon_2025 map-4"></i>
|
||||
<span className="ml-[5px]">3km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<i className="icon-star star4"></i>
|
||||
<span className="ml-[5px] mt-[3px]">4.7</span>
|
||||
</div>
|
||||
<a href="" className="text-[#1877F2] font-bold">
|
||||
Hanoicomputer
|
||||
</a>
|
||||
<a href="" className="text-[#E85933] underline block">
|
||||
Xem 7 cửa hàng
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ship">
|
||||
<p>Miễn phí giao hàng</p>
|
||||
<p>
|
||||
Nhận giap hàng và lắp đặt từ 8h00-21:30 các ngày trong tuần kể cả
|
||||
ngày thứ 7, CN
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="price">
|
||||
<div className="flex items-center text-base">
|
||||
<span>Giá:</span>
|
||||
<b className="ml-[5px] text-[#D80A00]">
|
||||
9.000.000đ - 20.000.000đ
|
||||
</b>
|
||||
</div>
|
||||
<b className="mt-2">Đã có VAT</b>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<p className="name-pro pb-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
<p className="name-pro py-[10px] border-b-[1px] border-[#D9D9D9]">
|
||||
8GB - 9.000.000đ new White
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href=""
|
||||
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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* end list */}
|
||||
|
||||
<a
|
||||
href=""
|
||||
className="pt-3 block text-center text-[#FF7A00] text-xl hover:text-orange-600"
|
||||
>
|
||||
Xem thêm
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { SupplierListBox } from "../../components/product/SupplierListBox";
|
||||
import { ProductDescription } from "../../components/product/ProductDescription";
|
||||
import { MemberReview } from "../../components/product/MemberReview";
|
||||
import { ProductReview } from "../../components/product/ProductReview";
|
||||
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
|
||||
@@ -249,8 +248,8 @@ export function ProductDetail() {
|
||||
{/* đánh giá thành viên bestpc */}
|
||||
|
||||
<ProductReview />
|
||||
{/* <ProductReview /> */}
|
||||
{/* đánh giá trên internet */}
|
||||
|
||||
<ProductDescription />
|
||||
{/* thông tin sản phẩm */}
|
||||
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{html,js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"noEmit": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
|
||||
/* Preact Config */
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "preact",
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
"react": ["./node_modules/preact/compat/"],
|
||||
"react-dom": ["./node_modules/preact/compat/"]
|
||||
}
|
||||
},
|
||||
"include": ["node_modules/vite/client.d.ts", "**/*"]
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import preact from '@preact/preset-vite';
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [preact()],
|
||||
server: {
|
||||
watch: {
|
||||
// Thêm thư mục ngoài src mà bạn muốn theo dõi
|
||||
usePolling: true, // Dùng polling để theo dõi thay đổi
|
||||
ignored: ['!**/node_modules/**'], // Loại bỏ các thư mục không cần theo dõi
|
||||
}
|
||||
},
|
||||
publicDir: 'static',
|
||||
});
|
||||
Reference in New Issue
Block a user