Añade carrito

1 files changed, 41 insertions, 0 deletions

diff --git a/src/routes/account/cart.tsx b/src/routes/account/cart.tsx
new file mode 100644
index 0000000..a98cf20
--- /dev/null
+++ b/src/routes/account/cart.tsx
@@ -0,0 +1,41 @@
+import { useLoaderData } from "react-router-dom";
+import { cartLoader } from "../../clients/loaders";
+import ProductCart from "../../components/product_cart";
+import { Product } from "../../models/product";
+import MainContentLayout from "../../components/main_content_layout";
+import { CartXFill } from "react-bootstrap-icons";
+
+export default function Cart() {
+  let products;
+  const data = useLoaderData() as Array<Product>;
+
+  if(data.length > 0) {
+    products = data.map(product =>
+      <ul>
+        <li key={product.id}>
+          <ProductCart product={product}/>
+        </li>
+      </ul>
+    );
+  }
+  else {
+    products = (
+      <div>
+        <div className="flex justify-center my-4 w-4/6">
+          <CartXFill color="rgb(55 65 81)" size={256}/>
+        </div>
+        <div className="flex justify-center my-4 w-4/6 text-2xl text-gray-900 my-2">
+          Su carrito está vacío, añada algunos productos para empezar a comprar.
+        </div>
+      </div>
+    );
+  }
+
+  return(
+    <>
+      <MainContentLayout>
+        {products}
+      </MainContentLayout>
+    </>
+  );
+}
\ No newline at end of file