diff options
Diffstat (limited to 'src/components/product_listing.tsx')
| -rw-r--r-- | src/components/product_listing.tsx | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx new file mode 100644 index 0000000..497bd19 --- /dev/null +++ b/src/components/product_listing.tsx @@ -0,0 +1,67 @@ +import { Collapse, Ripple, initTE} from "tw-elements"; +initTE({Collapse, Ripple}); +import "./stylesheets/shared.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> + ); + + return ( + <div className="flex w-3/5 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> + </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> + </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> + </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> + </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> + </tbody> + </table> + </div> + </div> + ); +}
\ No newline at end of file |