diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/account/account.tsx | 35 |
1 files changed, 32 insertions, 3 deletions
diff --git a/src/routes/account/account.tsx b/src/routes/account/account.tsx index baca1a5..8458285 100644 --- a/src/routes/account/account.tsx +++ b/src/routes/account/account.tsx @@ -1,13 +1,42 @@ import { useLoaderData } from "react-router-dom"; +import { PersonCircle } from "react-bootstrap-icons"; +import AddressesTable from "../../components/addresses_table"; +import PaymentMethodsTable from "../../components/payment_methods_table"; import MainContentLayout from "../../components/main_content_layout"; +import "../../components/stylesheets/shared.css"; export default function Account() { + const response = useLoaderData(); + const full_name = response[0].data.data.attributes.first_name + ' ' + response[0].data.data.attributes.last_name + const email = response[0].data.data.attributes.email + const addresses = response[1].data.data; + const payment_methods = response[2].data.data; + return( <> <MainContentLayout> - <h2> - Cuenta - </h2> + <div className="grid my-6 w-4/5 grid-cols-10 gap-2"> + <div className="w-2/5 col-span-1"> + <PersonCircle size={128} color="#394490"/> + </div> + <div className="grid grid-rows-3 col-span-9 mx-4"> + <div className="my-2"> + <h1 className="text-4xl"> + {full_name} + </h1> + </div> + <div className="text-2xl"> + <span className="mx-1 field_name">Correo electrónico:</span> {email} + </div> + <div> + <a type="button" className="button text-white hover:bg-blue-300 hover:text-gray focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" href="#"> + Editar + </a> + </div> + </div> + </div> + <AddressesTable addresses={addresses}/> + <PaymentMethodsTable payment_methods={payment_methods}/> </MainContentLayout> </> ); |