fixed logo

features/home/components/ProductCard.tsx

@@ -33,6 +33,7 @@ import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";
 import {
   useAddToCart,
   useUpdateCartItemQuantity,
+  useRemoveFromCart,
   useCart,
 } from "@/features/cart/hooks/useCart";
 import { useTranslations } from "next-intl";
@@ -73,6 +74,7 @@ export default function ProductCard({
     useToggleFavorite();
   const addToCartMutation = useAddToCart();
   const updateCartMutation = useUpdateCartItemQuantity();
+  const removeFromCartMutation = useRemoveFromCart();
   const { data: cartData, refetch: refetchCart } = useCart();
 
   const [api, setApi] = useState<CarouselApi>();
@@ -91,7 +93,7 @@ export default function ProductCard({
   const cartItem = cartData?.data?.find((item: any) => item.product?.id === id);
   const isInCart = !!cartItem;
   const isOutOfStock = stock === 0;
-  const availableStock = stock || 999;
+  const availableStock = stock || 0;
 
   useEffect(() => {
     if (!api) return;
@@ -118,7 +120,11 @@ export default function ProductCard({
       setIsSyncing(true);
 
       try {
-        await updateCartMutation.mutateAsync({ productId: id, quantity });
+        if (quantity === 0) {
+          await removeFromCartMutation.mutateAsync(id);
+        } else {
+          await updateCartMutation.mutateAsync({ productId: id, quantity });
+        }
         await refetchCart();
 
         if (pendingQuantityRef.current !== null) {
@@ -213,7 +219,7 @@ export default function ProductCard({
 
       const newQuantity = localQuantity + delta;
 
-      if (newQuantity < 1) return;
+      if (newQuantity < 0) return;
 
       if (newQuantity > availableStock) {
         setShowStockModal(true);
@@ -222,7 +228,7 @@ export default function ProductCard({
 
       setLocalQuantity(newQuantity);
     },
-    [localQuantity, availableStock],
+    [localQuantity, availableStock, setShowStockModal],
   );
 
   const handleCardClick = useCallback(
@@ -425,7 +431,7 @@ export default function ProductCard({
                         variant="outline"
                         size="icon"
                         onClick={(e) => handleQuantityChange(e, -1)}
-                        disabled={isSyncing || localQuantity <= 1}
+                        disabled={isSyncing}
                         className="rounded-[10px] cursor-pointer h-7 md:h-9 w-7 md:w-9 border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 disabled:opacity-30"
                       >
                         <Minus className="h-5 w-5 text-gray-700" />
@@ -447,9 +453,15 @@ export default function ProductCard({
                         size="icon"
                         onClick={(e) => handleQuantityChange(e, 1)}
                         disabled={isSyncing}
-                        className="rounded-[10px] cursor-pointer h-7 md:h-9 w-7 md:w-9 border-2 border-gray-900 bg-gray-900 hover:bg-gray-800 transition-all duration-200 disabled:opacity-30"
+                        className={`rounded-[10px] cursor-pointer h-7 md:h-9 w-7 md:w-9 border-2 transition-all duration-200 disabled:opacity-30 ${
+                          localQuantity >= availableStock
+                            ? "opacity-60 border-gray-200"
+                            : "border-gray-900 bg-gray-900 hover:bg-gray-800"
+                        }`}
                       >
-                        <Plus className="h-5 w-5 text-white" />
+                        <Plus
+                          className={`h-5 w-5 ${localQuantity >= availableStock ? "text-gray-900" : "text-white"}`}
+                        />
                       </Button>
                     </div>
                   )}

features/home/components/ProductGrid.tsx

@@ -72,7 +72,7 @@ export default function CollectionSection({ collection, locale }: Props) {
                 m.images_800x800 ||
                 m.images_720x720 ||
                 m.images_400x400 ||
-                m.thumbnail
+                m.thumbnail,
             )
             .filter(Boolean) || ["/placeholder-product.jpg"];
 
@@ -95,10 +95,11 @@ export default function CollectionSection({ collection, locale }: Props) {
               // height={450}
               // width={350}
               button={true}
+              stock={product.stock}
             />
           );
         })}
       </div>
     </section>
   );
-}
+}