fix: minor modification on cart page's design

This commit is contained in:
Afra ‌ 2026-09-05 14:00:55 +03:30
parent 6c5d02ddd0
commit c2b4c4a690

View file

@ -26,10 +26,7 @@ export default async function CartPage() {
);
return (
<main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-4 pt-4 pb-6">
{/* DOM order intentionally mirrors the screenshot's left→right layout, not reading
order — under this app's inherited dir="rtl", the first child renders at the
right edge and the last at the left. */}
<main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-4 pt-4 pb-28">
<div className="flex items-center justify-start gap-3">
<Link href="/" aria-label="بازگشت">
<ArrowRight className="h-5 w-5 text-foreground" />
@ -49,7 +46,11 @@ export default async function CartPage() {
)}
<Link
href={group.meets_minimum_order ? `/checkout/${group.store.uuid}` : "#"}
href={
group.meets_minimum_order
? `/checkout/${group.store.uuid}`
: "#"
}
aria-disabled={!group.meets_minimum_order}
className="mt-4 flex justify-center"
>
@ -65,19 +66,23 @@ export default async function CartPage() {
))}
</div>
<div className="flex flex-row justify-between border-t border-gray-200 pt-4 px-5">
<div className="flex flex-col items-start justify-start gap-2">
<span className="text-[14px] font-semibold text-foreground">
جمع کل سبد ({cart.groups.length.toLocaleString("fa-IR")} فروشگاه،{" "}
{totalItemLines.toLocaleString("fa-IR")} کالا)
<div className="fixed inset-x-0 bottom-0 z-50 flex w-full flex-col items-center">
<div className="flex w-full flex-row justify-between border-t border-gray-200 bg-white px-8 pt-6 pb-6">
<div className="flex flex-col items-start justify-start gap-2">
<span className="text-[14px] font-semibold text-foreground">
جمع کل سبد ({cart.groups.length.toLocaleString("fa-IR")} فروشگاه،{" "}
{totalItemLines.toLocaleString("fa-IR")} کالا)
</span>
<p className="text-end text-[12px] leading-normal text-gray-600">
هر فروشگاه جداگانه پرداخت و ارسال می‌شود
</p>
</div>
<span className="text-[16px] font-bold leading-none text-foreground">
{cart.grand_total.toLocaleString("fa-IR")} تومان
</span>
<p className="text-end text-[12px] leading-normal text-gray-600">
هر فروشگاه جداگانه پرداخت و ارسال می‌شود
</p>
</div>
<span className="text-[16px] font-bold leading-none text-foreground">
{cart.grand_total.toLocaleString("fa-IR")} تومان
</span>
</div>
</main>
);