38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
||
import { ShoppingBasket } from "lucide-react";
|
||
import { CartItemRow } from "@/components/customer/cart-item-row";
|
||
import type { CartGroup } from "@/types/api";
|
||
import type { ReactNode } from "react";
|
||
|
||
/** Shared between /cart and /checkout/[store] — the pixel-perfect per-store card. */
|
||
export function StoreCartCard({ group, children }: { group: CartGroup; children?: ReactNode }) {
|
||
return (
|
||
<section className="relative rounded-2xl border border-gray-300 bg-white p-6 shadow-[0_2px_10px_-6px_rgba(0,0,0,0.039),0_14px_28px_-12px_rgba(0,0,0,0.071)]">
|
||
<span className="absolute -top-3 left-4 rounded-lg bg-blue-bg px-2.5 py-1 text-[12px] font-semibold leading-none text-primary-action">
|
||
{group.items.length.toLocaleString("fa-IR")} کالا
|
||
</span>
|
||
|
||
<Link
|
||
href={`/stores/${group.store.uuid}`}
|
||
className="mb-3 flex items-center justify-start gap-2 border-b border-b-[#E4E4E7] pb-5"
|
||
>
|
||
<ShoppingBasket className="h-4.5 w-4.5 text-foreground" />
|
||
<span className="text-[16px] font-bold leading-none text-foreground">{group.store.name}</span>
|
||
</Link>
|
||
|
||
<div className="divide-y divide-gray-200">
|
||
{group.items.map((item) => (
|
||
<CartItemRow key={item.uuid} item={item} />
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex items-center justify-start border-t border-gray-200 pt-5 pb-1">
|
||
<span className="text-[13px] font-semibold leading-none text-foreground">
|
||
جمع فروشگاه: {group.items_subtotal.toLocaleString("fa-IR")} تومان
|
||
</span>
|
||
</div>
|
||
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|