210 lines
8.2 KiB
TypeScript
210 lines
8.2 KiB
TypeScript
|
export default function SendCart() {
|
||
|
|
return(
|
||
|
|
<div className="cart-page container">
|
||
|
|
<div className="text-center px-3">
|
||
|
|
<div className="mb-4">
|
||
|
|
<img src="images/cart-empty.png" className="block m-auto" />
|
||
|
|
</div>
|
||
|
|
<p className="mt-10 mb-6 text-20 font-600">
|
||
|
|
{" "}
|
||
|
|
Không có sản phẩm nào trong giỏ hàng của bạn !
|
||
|
|
</p>
|
||
|
|
<a
|
||
|
|
href="/"
|
||
|
|
className="inline-flex items-center bg-btn text-white leading-[52px] font-500 text-18 rounded-[50px] px-6"
|
||
|
|
>
|
||
|
|
{" "}
|
||
|
|
VỀ TRANG CHỦ <i className="bx bx-arrow-up-right-stroke text-30" />{" "}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<h1 className="text-[#004BA4] leading-10 text-[32px] font-600 mb-6">
|
||
|
|
{" "}
|
||
|
|
Giỏ hàng của tôi{" "}
|
||
|
|
</h1>
|
||
|
|
<div className="lg:flex flex-wrap items-start justify-between gap-6">
|
||
|
|
<div className="col-left w-[calc(100%-464px)]">
|
||
|
|
<div className="hidden lg:flex flex-wrap items-center justify-between gap-4 bg-white rounded-[12px] mb-3 py-3 px-4 lg:text-[16px] font-500 leading-10">
|
||
|
|
<p className="m-0 text-16 lg:text-[18px]"> 5 sản phẩm </p>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="h-10 border border-[#0678DB] bg-white rounded-[40px] text-[#0678DB] px-6 transition-all duration-100 hover:bg-[#0678DB] hover:text-white"
|
||
|
|
aria-label="Xóa sản phẩm"
|
||
|
|
>
|
||
|
|
{" "}
|
||
|
|
LÀM TRỐNG GIỎ HÀNG{" "}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white rounded-[16px] lg:rounded-[12px] mb-3 p-4">
|
||
|
|
<div className="cart-item mb-5 last:mb-0">
|
||
|
|
<a href="" className="item-img">
|
||
|
|
{" "}
|
||
|
|
<img src="images/product-5.jpg" />{" "}
|
||
|
|
</a>
|
||
|
|
<div className="item-text">
|
||
|
|
<div className="item-name">
|
||
|
|
<a
|
||
|
|
href=""
|
||
|
|
className="table uppercase font-500 lg:text-[16px] text-12"
|
||
|
|
>
|
||
|
|
HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB
|
||
|
|
</a>
|
||
|
|
<div className="group mt-2 table">
|
||
|
|
<p className="m-0 text-[#0678DB] font-500 cursor-pointer">
|
||
|
|
<span> Chi tiết khuyến mại </span>
|
||
|
|
<i className="bx bx-chevron-down text-[#A0A5AC] text-16 align-middle transition-all group-hover:rotate-[-180deg]" />
|
||
|
|
</p>
|
||
|
|
<div className="item-offer group-hover:opacity-100 group-hover:z-[5] group-hover:visible">
|
||
|
|
<div className="item">
|
||
|
|
<p>
|
||
|
|
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||
|
|
<strong>⭐ Tặng Balo Laptop Hoàng Hà PC</strong>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="item">
|
||
|
|
<p>
|
||
|
|
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||
|
|
<strong>⭐ Tặng Chuột không dây</strong>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="item">
|
||
|
|
<p>
|
||
|
|
<span style={{ fontSize: "12pt", color: "#ff0000" }}>
|
||
|
|
<strong>⭐ Tặng Bàn di chuột</strong>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="item-quantiy">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="js-quantity-change bx bx-minus"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
defaultValue={1}
|
||
|
|
min={1}
|
||
|
|
data-stock={998}
|
||
|
|
pattern="[0-9]*"
|
||
|
|
inputMode="numeric"
|
||
|
|
className="js-buy-quantity js-quantity-change text-center"
|
||
|
|
/>
|
||
|
|
<button type="button" className="js-quantity-change bx bx-plus" />
|
||
|
|
</div>
|
||
|
|
<div className="item-price text-right lg:text-left">
|
||
|
|
<p className="text-[#FF4E2A] font-bold mb-0 lg:mb-1 lg:text-[16px] lg:leading-5 text-13 leading-4">
|
||
|
|
{" "}
|
||
|
|
42.000.000 đ{" "}
|
||
|
|
</p>
|
||
|
|
<del className="block text-[#A0A5AC] lg:text-[13px] lg:leading-4 text-10 leading-3">
|
||
|
|
{" "}
|
||
|
|
52.000.000 đ{" "}
|
||
|
|
</del>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="item-delete bx bx-trash w-8 h-8 lg:w-10 lg:h-10 rounded-full border border-[#E7D9D9] bg-[#F8F3F3] text-[#BE1F2D] text-16 lg:text-[20px] hover:text-white hover:bg-[#BE1F2D] hover:border-transparent"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white p-4 lg:pt-5 rounded-[16px] lg:rounded-[12px]">
|
||
|
|
<p className="font-600 text-16 lg:text-[18px] mb-2 lg:mb-4 leading-5 lg:leading-6">
|
||
|
|
{" "}
|
||
|
|
Thông tin đơn hàng{" "}
|
||
|
|
</p>
|
||
|
|
<div className="flex items-center justify-between gap-3 border-b border-[#D2DAE3] border-dashed pb-4 mb-3 lg:mb-5 leading-5 lg:leading-6 lg:text-[16px]">
|
||
|
|
<p className="m-0"> Tổng tiền </p>
|
||
|
|
<p className="m-0 font-500 text-15 lg:text-[18px]"> 50.000.000 đ </p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center justify-between gap-3 leading-5 lg:leading-6">
|
||
|
|
<p className="m-0 flex items-center gap-2">
|
||
|
|
<i className="bx bxs-credit-card-alt text-20 text-[#B5BAC1]" />
|
||
|
|
<span> Tổng thanh toán </span>
|
||
|
|
</p>
|
||
|
|
<p className="m-0 text-16 text-[#FF4E2A] font-bold lg:text-[20px]">
|
||
|
|
{" "}
|
||
|
|
41.450.000 <u>đ</u>{" "}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<form className="col-right w-[440px] bg-white rounded-[16px] px-5 py-6 sticky top-[90px] z-[1] shadow-[0px_4px_20px_0px_#0615070D] lg:shadow-[none]">
|
||
|
|
<p className="font-600 text-18 text-[#004BA4] leading-6 mb-1">
|
||
|
|
{" "}
|
||
|
|
Thông tin nhận hàng{" "}
|
||
|
|
</p>
|
||
|
|
<div className="leading-[18px] text-[#474747] mb-4">
|
||
|
|
Để tiếp tục đặt hàng, quý khách xin vui lòng
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
aria-label="Đăng nhập"
|
||
|
|
className="font-500 text-[#0678DB]"
|
||
|
|
>
|
||
|
|
{" "}
|
||
|
|
đăng nhập{" "}
|
||
|
|
</button>
|
||
|
|
hoặc nhập thông tin bên dưới. Tư vấn viên sẽ liên hệ theo thông tin bạn
|
||
|
|
cung cấp để xác nhận, không mua không sao
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id=""
|
||
|
|
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||
|
|
placeholder="Họ và tên"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="tel"
|
||
|
|
id=""
|
||
|
|
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||
|
|
inputMode="numeric"
|
||
|
|
pattern="[0-9]{10,11}"
|
||
|
|
maxLength={11}
|
||
|
|
placeholder="Số điện thoại"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
id=""
|
||
|
|
className="block w-full h-[50px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||
|
|
maxLength={254}
|
||
|
|
placeholder="Nhập email"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id=""
|
||
|
|
className="block w-full h-[50px] mb-2 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4"
|
||
|
|
placeholder="Địa chỉ nhận hàng"
|
||
|
|
/>
|
||
|
|
<p className="text-[#757575] mb-4">
|
||
|
|
{" "}
|
||
|
|
<i className="bx bx-info-circle text-16 text-[#0678DB] mr-1 align-text-top" />{" "}
|
||
|
|
<span> Nhập Số nhà, Đường, Phường/xã, Quận, Tỉnh </span>{" "}
|
||
|
|
</p>
|
||
|
|
<textarea
|
||
|
|
id=""
|
||
|
|
className="block w-full h-[112px] mb-4 border border-transparent rounded-[12px] bg-[#F3F3F3] px-4 pt-[12px] resize-none outline-none"
|
||
|
|
placeholder="Ghi chú"
|
||
|
|
defaultValue={""}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="red font-600 my-4"> </div>
|
||
|
|
<div className="mt-5">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
className="block w-full bg-btn text-white h-[52px] rounded-[50px] font-500 text-18"
|
||
|
|
>
|
||
|
|
{" "}
|
||
|
|
ĐẶT HÀNG{" "}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|