From 385606ee05a8ceb9073169639eb1a311f81cac10 Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Thu, 11 May 2023 19:28:47 -0600
Subject: Añade información a la vista de usuario
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/account/account.tsx | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

(limited to 'src/routes/account/account.tsx')

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>
     </>
   );
-- 
cgit v1.2.3