259 lines
9.2 KiB
TypeScript
259 lines
9.2 KiB
TypeScript
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>
|
|
);
|
|
}
|