Añade lógica de carrito

1 files changed, 26 insertions, 9 deletions

diff --git a/src/components/product_cart.tsx b/src/components/product_cart.tsx
index 86d2615..4e78d1a 100644
--- a/src/components/product_cart.tsx
+++ b/src/components/product_cart.tsx
@@ -1,27 +1,44 @@
+import { Form } from "react-router-dom";
 import "./stylesheets/product_listing.css";
 
 export default function ProductCart({ product }) {
   return (
-    <div className="my-2 w-4/6 grid grid-cols-3 gap-2 border-2 border-gray-300">
-      <div className="col-span-2">
+    <div className="my-2 w-3/6 grid grid-cols-2 gap-2 border-2 border-gray-300">
+      <div>
         <img className="listing-image" src={product.picture} />
       </div>
-      <div className="grid grid-rows-3">
+      <div className="grid grid-rows-6">
         <div className="product-listing-text text-2xl">
           {product.name}
         </div>
+        <div className="product-listing-text text-xl">
+          Precio unitario
+        </div>
         <div className="text-lg">
-          <span className="product-listing-text text-xl">
-            Precio unitario
-          </span>
           {product.unitary_price}
         </div>
+        <div className="product-listing-text text-xl">
+          Precio al por mayor
+        </div>
         <div className="text-lg">
-          <span className="product-listing-text text-xl">
-            Precio al por mayor
-          </span>
           {product.bulk_price}
         </div>
+        <div className="flex flex-row">
+          <div className="product-listing-text text-lg">
+            Cantidad en carrito:
+          </div> 
+          <div className="mx-2 text-lg">
+            {product.quantity}
+          </div>
+          <div className="mx-2">
+            <Form method="post" id="delete-product-cart-form">
+              <input type="hidden" id="product-id" name="product_id" value={product.id} />
+              <button type="submit" className="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
+                Borrar
+              </button>
+            </Form>
+          </div>
+        </div>
       </div>
     </div>
   );