diff options
Diffstat (limited to 'src/routes/products/product.tsx')
| -rw-r--r-- | src/routes/products/product.tsx | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/src/routes/products/product.tsx b/src/routes/products/product.tsx new file mode 100644 index 0000000..1eecbcf --- /dev/null +++ b/src/routes/products/product.tsx @@ -0,0 +1,37 @@ +import { useLoaderData } from "react-router-dom"; +import { CartPlusFill } from "react-bootstrap-icons" +import ProductListing from "../../components/product_listing"; +import MainContentLayout from "../../components/main_content_layout"; +import Review from "../../components/review"; +import "../../components/stylesheets/shared.css" + +export default function Product() { + const response = useLoaderData(); + const product = response[0].data; + const reviews = response[1].data.data.map(review => + <li key={review.id}> + <Review review={review}/> + </li> + ); + + return ( + <> + <MainContentLayout> + <ProductListing product={product.data}/> + <div className="my-2 flex flex-flow-reverse w-4/6"> + <div> + <button className="flex inline-block rounded button px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"> + <CartPlusFill size={16}/> + <span className="mx-2">Añadir al carrito</span> + </button> + </div> + </div> + <div className="my-4"> + <ul> + {reviews} + </ul> + </div> + </MainContentLayout> + </> + ); +}
\ No newline at end of file |