59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { useTransition } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { updateCartItemQuantity, removeCartItem } from "@/lib/api/cart";
|
||
import type { CartItem } from "@/types/api";
|
||
|
||
export function CartItemRow({ item }: { item: CartItem }) {
|
||
const router = useRouter();
|
||
const [isPending, startTransition] = useTransition();
|
||
|
||
function changeQuantity(nextQuantity: number) {
|
||
startTransition(async () => {
|
||
if (nextQuantity <= 0) {
|
||
await removeCartItem(item.uuid);
|
||
} else {
|
||
await updateCartItemQuantity(item.uuid, nextQuantity);
|
||
}
|
||
router.refresh();
|
||
});
|
||
}
|
||
|
||
return (
|
||
<div className={`flex items-center gap-3 py-3 ${isPending ? "opacity-50" : ""}`}>
|
||
<div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-muted">
|
||
{item.product.image_url && (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img src={item.product.image_url} alt="" className="h-full w-full object-cover" />
|
||
)}
|
||
</div>
|
||
<div className="flex flex-1 flex-col gap-1">
|
||
<span className="text-sm font-medium">{item.product.name}</span>
|
||
<span className="text-xs text-muted-foreground">{item.product.price.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 rounded-full border border-border px-2 py-1">
|
||
<button
|
||
type="button"
|
||
disabled={isPending}
|
||
onClick={() => changeQuantity(item.quantity - 1)}
|
||
className="flex h-6 w-6 items-center justify-center text-sm"
|
||
aria-label="کاهش تعداد"
|
||
>
|
||
−
|
||
</button>
|
||
<span className="w-5 text-center text-sm">{item.quantity}</span>
|
||
<button
|
||
type="button"
|
||
disabled={isPending}
|
||
onClick={() => changeQuantity(item.quantity + 1)}
|
||
className="flex h-6 w-6 items-center justify-center text-sm"
|
||
aria-label="افزایش تعداد"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
<span className="w-20 shrink-0 text-end text-sm font-semibold">{item.line_total.toLocaleString("fa-IR")}</span>
|
||
</div>
|
||
);
|
||
}
|