summaryrefslogtreecommitdiff
path: root/src/routes
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes')
-rw-r--r--src/routes/products/product.tsx37
-rw-r--r--src/routes/products/products.tsx4
2 files changed, 39 insertions, 2 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
diff --git a/src/routes/products/products.tsx b/src/routes/products/products.tsx
index c7f3a3a..ea06c15 100644
--- a/src/routes/products/products.tsx
+++ b/src/routes/products/products.tsx
@@ -1,11 +1,11 @@
-import { useLoaderData } from "react-router-dom";
+import { Link, useLoaderData } from "react-router-dom";
import ProductListing from "../../components/product_listing";
import SearchBar from "../../components/search_bar";
import MainContentLayout from "../../components/main_content_layout";
export default function Products() {
const products = useLoaderData().data;
- const productList = products.map(product =>
+ const productList = products.data.map(product =>
<li key={product.id}>
<ProductListing product={product}/>
</li>