diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/navbar.tsx | 26 | ||||
| -rw-r--r-- | src/components/payment_methods_table.tsx | 8 | ||||
| -rw-r--r-- | src/components/product_cart.tsx | 28 |
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 |