31 lines
1.6 KiB
TypeScript
31 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
||
|
||
/** designspec.md §2.6 — only rendered when this store's cart group actually has items. */
|
||
export function StickyCartBar({ itemCount, total }: { itemCount: number; total: number }) {
|
||
return (
|
||
<div className="fixed inset-x-0 bottom-0 z-10 mx-auto flex w-full max-w-97.5 flex-col items-center gap-2 bg-white px-4 pt-4 pb-2 shadow-[0_-4px_15px_0_rgba(0,0,0,0.102)]">
|
||
{/* 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. */}
|
||
<div className="flex w-full items-center justify-between">
|
||
<div className="flex flex-col items-start gap-2">
|
||
<span className="text-[12px] leading-none text-gray-600">جمع کل</span>
|
||
<span className="text-[18px] font-bold leading-none text-foreground">
|
||
{total.toLocaleString("fa-IR")} تومان
|
||
</span>
|
||
</div>
|
||
|
||
<Link
|
||
href="/cart"
|
||
className="flex h-12.5 items-center gap-2 rounded-xl bg-primary-action py-1 px-5 text-white shadow-[0_6px_16px_-6px_rgba(0,0,0,0.078),0_2px_8px_-2px_rgba(0,0,0,0.071)]"
|
||
>
|
||
<span className="text-body-large font-bold">مشاهده سبد</span>
|
||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/20 text-[13px] font-bold text-white">
|
||
{itemCount.toLocaleString("fa-IR")}
|
||
</span>
|
||
</Link>
|
||
</div>
|
||
<div className="mt-2 h-1.5 w-32 rounded-full bg-black" />
|
||
</div>
|
||
);
|
||
}
|