diff options
Diffstat (limited to 'src/components/product_listing.tsx')
| -rw-r--r-- | src/components/product_listing.tsx | 32 |
1 files changed, 8 insertions, 24 deletions
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> |