This commit is contained in:
2025-05-27 14:24:58 +07:00
parent 0c0bf4e127
commit 170122ad32
115 changed files with 1 additions and 1 deletions

View 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 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 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">Đã 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 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">Đã 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 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">Đã 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>
);
}