230 lines
9.4 KiB
TypeScript
230 lines
9.4 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|