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