update 03/02

2026-02-03 17:20:38 +07:00
parent 6318621cc0
commit 332cb5da14
19 changed files with 1092 additions and 1023 deletions
--- a/src/components/shared/CartItem.tsx
+++ b/src/components/shared/CartItem.tsx
@@ -0,0 +1,75 @@
+
+import Link from "next/link";
+import { formatTextList } from "@/lib/utils"
+import parse from 'html-react-parser';
+import { formatPrice } from "@/lib/utils"
+
+export default function CartItem({ item }: any) {
+    const {
+        item_info,
+        in_cart
+    } = item;
+    
+    return (
+        <div className="cart-item mb-5 last:mb-0">
+            <Link href={item_info.productUrl} className="item-img">
+                <img src={item_info.productImage.large} />
+            </Link>
+
+            <div className="item-text">
+                <div className="item-name">
+                    <Link href={item_info.productUrl}
+                        className="table uppercase font-500 lg:text-[16px] text-12"
+                    >
+                        {item_info.productName}
+                    </Link>
+
+                    {item_info.specialOffer.all.length > 0 &&
+                        <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">
+                                {parse(formatTextList(item_info.specialOffer.all[0].title))}                                
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <div className="item-quantiy">
+                    <button type="button" className="js-quantity-change bx bx-minus" />
+
+                    <input
+                        type="number"
+                        defaultValue={in_cart.quantity}
+                        min={1}
+                        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">
+                        { formatPrice(item_info.price) } đ
+                    </p>
+
+                    {item_info.marketPrice > 0 &&
+                        <del className="block text-[#A0A5AC] lg:text-[13px] lg:leading-4 text-10 leading-3">
+                            { formatPrice(item_info.marketPrice) } đ
+                        </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>
+    )
+}