Añade carrito

3 files changed, 55 insertions, 7 deletions

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index d136e31..4078405 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -2,8 +2,26 @@ import { CartFill } from "react-bootstrap-icons";
 import "./stylesheets/navbar.css";
 import "./stylesheets/shared.css";
 import MainPageDropdownMenu from "./main_page_dropdown_menu";
+import Token from "../lib/token";
 
 export default function Navbar() {
+  const session = new Token();
+  let cart;
+
+  if (session.present()) {
+    cart = (
+      <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
+          href="/account/cart">
+        <span className="[&>svg]:w-5">
+          <CartFill color="#394490" size={32}/>
+        </span>
+      </a>
+    );  
+  }
+  else {
+    cart = null;
+  }
+
   return(
     <>
       <header>
@@ -33,12 +51,8 @@ export default function Navbar() {
 
               { /* Lado derecho */}
               <div className="flex items-center">
-                <a className="mr-4 text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
-                   href="#">
-                  <span className="[&>svg]:w-5">
-                    <CartFill color="#394490" size={32}/>
-                  </span>
-                </a>
+
+                {cart}
 
                 <MainPageDropdownMenu/>
               </div>
diff --git a/src/components/payment_methods_table.tsx b/src/components/payment_methods_table.tsx
index e9ac639..03fe473 100644
--- a/src/components/payment_methods_table.tsx
+++ b/src/components/payment_methods_table.tsx
@@ -7,10 +7,16 @@ export default function PaymentMethodsTable({ payment_methods }) {
   );
 
   return(
-    <div className="my-2 w-4/5 relative overflow-x-auto">
+    <div className="my-4 w-4/5 relative overflow-x-auto">
       <h1 className="text-2xl my-2">
         Métodos de pago
       </h1>
+      <div className="absolute top-0 right-0">
+        <a type="button" className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
+          href="/account/cards/new">
+          Nuevo método de pago
+        </a>
+      </div>
       <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <thead className="bg-blue-arma text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
         <tr>
diff --git a/src/components/product_cart.tsx b/src/components/product_cart.tsx
new file mode 100644
index 0000000..86d2615
--- /dev/null
+++ b/src/components/product_cart.tsx
@@ -0,0 +1,28 @@
+import "./stylesheets/product_listing.css";
+
+export default function ProductCart({ product }) {
+  return (
+    <div className="my-2 w-4/6 grid grid-cols-3 gap-2 border-2 border-gray-300">
+      <div className="col-span-2">
+        <img className="listing-image" src={product.picture} />
+      </div>
+      <div className="grid grid-rows-3">
+        <div className="product-listing-text text-2xl">
+          {product.name}
+        </div>
+        <div className="text-lg">
+          <span className="product-listing-text text-xl">
+            Precio unitario
+          </span>
+          {product.unitary_price}
+        </div>
+        <div className="text-lg">
+          <span className="product-listing-text text-xl">
+            Precio al por mayor
+          </span>
+          {product.bulk_price}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file