diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/product_listing.tsx | 71 | ||||
| -rw-r--r-- | src/components/review.tsx | 30 |
2 files changed, 67 insertions, 34 deletions
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> ); diff --git a/src/components/review.tsx b/src/components/review.tsx new file mode 100644 index 0000000..e3f34df --- /dev/null +++ b/src/components/review.tsx @@ -0,0 +1,30 @@ +import { PersonCircle, StarFill } from "react-bootstrap-icons"; + +export default function Review({ review }) { + const rating = [...Array(review.attributes.rating)].map((value: undefined, index: number) => + <StarFill size={12} color="rgb(156 163 175)"/> + ); + + return( + <> + <div className="grid grid-cols-10 w-3/5 my-4"> + <div className="flex flex-col col-span- justify-center mx-2"> + <div> + {review.attributes.author_name} + </div> + <div> + <PersonCircle size={32} color="rgb(156 163 175)"/> + </div> + <div className="flex inline-flex my-2"> + {rating} + </div> + </div> + <div className="flex col-span-8 justify-start"> + <div className="border-solid border-2 border-gray-200"> + {review.attributes.review} + </div> + </div> + </div> + </> + ); +}
\ No newline at end of file |