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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user