d
This commit is contained in:
258
old/src/components/product/SupplierListBox.tsx
Normal file
258
old/src/components/product/SupplierListBox.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user