fixed some bugs
This commit is contained in:
@jcarymuhammedow
@@ -38,122 +38,150 @@ export function ProductPurchaseCard({
|
||||
onToggleFavorite,
|
||||
t,
|
||||
}: ProductPurchaseCardProps) {
|
||||
const isOutOfStock = productStock === 0;
|
||||
|
||||
return (
|
||||
<div className="lg:w-[380px] space-y-4">
|
||||
<Card className="p-6 rounded-xl">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<span className="text-lg text-gray-500">{t("price")}:</span>
|
||||
<div className="lg:w-[420px] space-y-4">
|
||||
<Card className="p-6 rounded-lg border border-gray-200 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
{/* Price Section */}
|
||||
<div className="flex justify-between items-baseline mb-3 pb-4 border-b border-gray-100 ">
|
||||
<span className="text-lg font-medium text-gray-600">
|
||||
{t("price")}:
|
||||
</span>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-3xl font-bold text-primary">{price} TMT</span>
|
||||
<span className="text-4xl font-bold text-gray-900 tracking-tight">
|
||||
{price}{" "}
|
||||
<span className="text-2xl font-semibold text-gray-500">TMT</span>
|
||||
</span>
|
||||
{oldPrice && parseFloat(oldPrice) > 0 && (
|
||||
<span className="text-lg text-gray-400 line-through">
|
||||
<span className="text-lg text-gray-400 line-through mt-1">
|
||||
{oldPrice} TMT
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* Action Buttons Section */}
|
||||
<div className="space-y-3">
|
||||
{isInCart ? (
|
||||
<>
|
||||
{/* Go to Cart Button */}
|
||||
<Link href="/cart">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full rounded-lg cursor-pointer text-lg font-bold bg-green-600 hover:bg-green-700 mb-4"
|
||||
className="w-full h-12 rounded-[10px] cursor-pointer text-lg font-bold bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-700 hover:to-emerald-600 shadow-md hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{t("go_to_cart")}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Quantity Controls */}
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onQuantityDecrease}
|
||||
disabled={isSyncing}
|
||||
className={`rounded-lg cursor-pointer h-12 w-12 ${
|
||||
isSyncing ? "opacity-70" : ""
|
||||
className={`rounded-[10px] h-12 w-12 border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed ${
|
||||
isSyncing ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
<Minus className="h-5 w-5" />
|
||||
<Minus className="h-5 w-5 text-gray-700" />
|
||||
</Button>
|
||||
<div className="flex-1 text-center font-semibold text-xl border rounded-xl h-12 flex items-center justify-center relative">
|
||||
{localQuantity}
|
||||
|
||||
<div className="flex-1 text-center font-semibold text-2xl border-2 border-gray-200 rounded-[10px] h-12 flex items-center justify-center bg-white relative">
|
||||
{isSyncing ? (
|
||||
<div className="absolute inset-0 bg-white/80 rounded-2xl flex items-center justify-center">
|
||||
<div className="w-5 h-5 border-2 border-gray-300 border-t-gray-900 rounded-full animate-spin" />
|
||||
</div>
|
||||
) : null}
|
||||
<span className={isSyncing ? "opacity-30" : ""}>
|
||||
{localQuantity}
|
||||
</span>
|
||||
{syncError && (
|
||||
<span
|
||||
className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"
|
||||
className="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full border-2 border-white shadow-sm"
|
||||
title="Sync error"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onQuantityIncrease}
|
||||
disabled={isSyncing}
|
||||
className={`rounded-lg cursor-pointer h-12 w-12 ${
|
||||
isSyncing ? "opacity-70" : ""
|
||||
disabled={isSyncing || localQuantity >= availableStock}
|
||||
className={`rounded-[10px] h-12 w-12 border-2 border-gray-900 bg-gray-900 hover:bg-gray-800 transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed ${
|
||||
isSyncing ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
<Plus className="h-5 w-5 text-white" />
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Favorite Button - In Cart */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleFavorite}
|
||||
className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
|
||||
className={`rounded-[10px] h-12 w-12 transition-all duration-200 border-2 cursor-pointer ${
|
||||
isFavorite
|
||||
? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
|
||||
: "hover:bg-gray-50"
|
||||
? "bg-rose-50 border-rose-200 hover:bg-rose-100 hover:border-rose-300"
|
||||
: "border-gray-200 hover:border-gray-900 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6! w-6! transition-all ${
|
||||
className={`h-6 w-6 transition-all duration-200 ${
|
||||
isFavorite
|
||||
? "fill-[#005bff] text-[#005bff]"
|
||||
: "text-[#005bff]"
|
||||
? "fill-rose-500 text-rose-500 scale-110"
|
||||
: "text-gray-700 hover:text-rose-500"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Add to Cart Button */}
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={onAddToCart}
|
||||
disabled={isSyncing || productStock === 0}
|
||||
className="flex-1 rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
|
||||
disabled={isSyncing || isOutOfStock}
|
||||
className={`flex-1 h-12 rounded-[10px] text-lg font-bold shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer ${
|
||||
isOutOfStock
|
||||
? "bg-gray-300 text-gray-600 cursor-not-allowed"
|
||||
: "bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700"
|
||||
}`}
|
||||
>
|
||||
{isSyncing ? (
|
||||
<>{t("adding")}</>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>{t("adding")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart className="mr-2 h-5 w-5" />
|
||||
{productStock === 0 ? t("out_of_stock") : t("add_to_cart")}
|
||||
{isOutOfStock ? t("out_of_stock") : t("add_to_cart")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Favorite Button - Not in Cart */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleFavorite}
|
||||
className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
|
||||
className={`rounded-[10px] h-12 w-12 transition-all duration-200 border-2 cursor-pointer ${
|
||||
isFavorite
|
||||
? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
|
||||
: "hover:bg-gray-50"
|
||||
? "bg-rose-50 border-rose-200 hover:bg-rose-100 hover:border-rose-300"
|
||||
: "border-gray-200 hover:border-gray-900 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-6! w-6! transition-all ${
|
||||
className={`h-6 w-6 transition-all duration-200 ${
|
||||
isFavorite
|
||||
? "fill-[#005bff] text-[#005bff]"
|
||||
: "text-[#005bff]"
|
||||
? "fill-rose-500 text-rose-500 scale-110"
|
||||
: "text-gray-700 hover:text-rose-500"
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
@@ -161,8 +189,6 @@ export function ProductPurchaseCard({
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user