From f6cc288cd67308330a83094bc2f0b64132ad81e8 Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Mon, 1 May 2023 12:25:03 -0600
Subject: Vista de proveedores

---
 src/components/product_listing.tsx | 32 ++++++++------------------------
 1 file changed, 8 insertions(+), 24 deletions(-)

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

diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx
index d9c5488..1da96c3 100644
--- a/src/components/product_listing.tsx
+++ b/src/components/product_listing.tsx
@@ -1,13 +1,13 @@
-import { Collapse, Ripple, initTE} from "tw-elements";
 import { Link } from "react-router-dom";
+import { Dropdown } from "flowbite-react";
 import "./stylesheets/shared.css"
-import "./stylesheets/product_listing.css"
+import "./stylesheets/product_listing.css";
 
 export default function ProductListing({ product }) {
-  const collapseMenu = `collapse${product.id}`
-  const collapseTarget = `#${collapseMenu}`
   const categories = product.attributes.categories.map(category =>
-    <li>{category}</li>
+    <Dropdown.Item>
+      {category}
+    </Dropdown.Item>
   );
 
   return (
@@ -44,25 +44,9 @@ export default function ProductListing({ product }) {
           </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>
+          <Dropdown label="Categorías" dismissOnClick={false} color="dark">
+            {categories}
+          </Dropdown>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3