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>