From c7e493ce3d2855e61787d86714625bc7fc51f9bd Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Wed, 26 Apr 2023 21:37:38 -0600
Subject: Añade vista de producto individual
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/product_listing.tsx | 71 ++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 34 deletions(-)

(limited to 'src/components/product_listing.tsx')

diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx
index 497bd19..d9c5488 100644
--- a/src/components/product_listing.tsx
+++ b/src/components/product_listing.tsx
@@ -1,5 +1,5 @@
 import { Collapse, Ripple, initTE} from "tw-elements";
-initTE({Collapse, Ripple});
+import { Link } from "react-router-dom";
 import "./stylesheets/shared.css"
 import "./stylesheets/product_listing.css"
 
@@ -7,60 +7,63 @@ export default function ProductListing({ product }) {
   const collapseMenu = `collapse${product.id}`
   const collapseTarget = `#${collapseMenu}`
   const categories = product.attributes.categories.map(category =>
-
     <li>{category}</li>
   );
 
   return (
-    <div className="flex w-3/5 my-4  border-solid border-2 border-gray-200">
+    <div className="flex w-4/6 my-4  border-solid border-2 border-gray-200">
       <img className="listing-image" src={product.attributes.picture} />
       <div className="overflow-hidden">
         <table>
           <thead>
             <tr >
-              <th scope="col" className="product-listing-text font-bold text-2xl px-6 py-4">{product.attributes.name}</th>
+              <th scope="col" className="product-listing-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
+                <Link to={`/products/${ product.attributes.public_id }`}>
+                  {product.attributes.name}
+                </Link>
+              </th>
             </tr>
           </thead>
           <tbody>
             <tr className="border-b dark:border-neutral-500">
-              <td className="product-listing-text text-xl">Precio al por menor</td>
-              <td className="text-neutral-900 text-xl">{product.attributes.unitary_price} $</td>
+              <td className="product-listing-text text-xl px-6 py-4">Precio al por menor</td>
+              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.unitary_price} $</td>
             </tr>
             <tr className="border-b dark:border-neutral-500">
-              <td className="product-listing-text text-xl">Precio al por mayor</td>
-              <td className="text-neutral-900 text-xl">{product.attributes.bulk_price} $</td>
+              <td className="product-listing-text text-xl px-6 py-4">Precio al por mayor</td>
+              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.bulk_price} $</td>
             </tr>
             <tr className="border-b dark:border-neutral-500">
-              <td className="product-listing-text text-xl">Proveedor</td>
-              <td className="text-neutral-900 text-xl">{product.attributes.company.name}</td>
+              <td className="product-listing-text text-xl px-6 py-4">Disponibles</td>
+              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.available_quantity}</td>
             </tr>
-            <tr>
-              <td>
-                <div className="my-2">
-                  <button
-                    className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
-                    type="button"
-                    data-te-collapse-init
-                    data-te-ripple-init
-                    data-te-ripple-color="light"
-                    data-te-target={collapseTarget}
-                    aria-expanded="false"
-                    aria-controls={collapseMenu}>
-                    Categorías
-                  </button>
-                  <div className="!visible hidden" id={collapseMenu} data-te-collapse-item>
-                    <div
-                      className="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
-                      <ul>
-                        <li>{categories}</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </td>
+            <tr className="border-b dark:border-neutral-500">
+              <td className="product-listing-text text-xl px-6 py-4">Proveedor</td>
+              <td className="text-neutral-900 text-xl px-6 py-4">{product.attributes.company.name}</td>
             </tr>
           </tbody>
         </table>
+        <div className="my-2">
+          <button
+            className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+            type="button"
+            data-te-collapse-init
+            data-te-ripple-init
+            data-te-ripple-color="light"
+            data-te-target={collapseTarget}
+            aria-expanded="false"
+            aria-controls={collapseMenu}>
+            Categorías
+          </button>
+          <div className="!visible hidden" id={collapseMenu} data-te-collapse-item>
+            <div
+              className="flex rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
+              <ul>
+                {categories}
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
-- 
cgit v1.2.3