From c7e493ce3d2855e61787d86714625bc7fc51f9bd Mon Sep 17 00:00:00 2001 From: HombreLaser 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 ++++++++++++++++++++------------------ src/components/review.tsx | 30 ++++++++++++++++ 2 files changed, 67 insertions(+), 34 deletions(-) create mode 100644 src/components/review.tsx (limited to 'src/components') 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 => -
  • {category}
    • ); return ( -
    +
    - + - - + + - - + + - - + + - - + + +
    {product.attributes.name} + + {product.attributes.name} + +
    Precio al por menor{product.attributes.unitary_price} $Precio al por menor{product.attributes.unitary_price} $
    Precio al por mayor{product.attributes.bulk_price} $Precio al por mayor{product.attributes.bulk_price} $
    Proveedor{product.attributes.company.name}Disponibles{product.attributes.available_quantity}
    -
    - -
    -
    -
      -
    • {categories}
      • -
    -
    -
    -
    -
    Proveedor{product.attributes.company.name}
    +
    + +
    +
    +
      + {categories} +
    +
    +
    +
    ); 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) => + + ); + + return( + <> +
    +
    +
    + {review.attributes.author_name} +
    +
    + +
    +
    + {rating} +
    +
    +
    +
    + {review.attributes.review} +
    +
    +
    + + ); +} \ No newline at end of file -- cgit v1.2.3