summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/address.tsx28
-rw-r--r--src/components/addresses_table.tsx42
-rw-r--r--src/components/payment_method.tsx23
-rw-r--r--src/components/payment_methods_table.tsx40
-rw-r--r--src/components/stylesheets/shared.css12
5 files changed, 145 insertions, 0 deletions
diff --git a/src/components/address.tsx b/src/components/address.tsx
new file mode 100644
index 0000000..1701fd1
--- /dev/null
+++ b/src/components/address.tsx
@@ -0,0 +1,28 @@
+import countryList from "react-select-country-list";
+
+export default function Address({ address }) {
+ return(
+ <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+ <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ {address.attributes.street}
+ </th>
+ <td className="px-6 py-4">
+ {address.attributes.number}
+ </td>
+ <td className="px-6 py-4">
+ {address.attributes.zip_code}
+ </td>
+ <td className="px-6 py-4">
+ {address.attributes.city}
+ </td>
+ <td className="px-6 py-4">
+ {countryList().getLabel(address.attributes.country)}
+ </td>
+ <td className="px-6 py-4">
+ <button 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">
+ Editar
+ </button>
+ </td>
+ </tr>
+ );
+} \ No newline at end of file
diff --git a/src/components/addresses_table.tsx b/src/components/addresses_table.tsx
new file mode 100644
index 0000000..ae46f21
--- /dev/null
+++ b/src/components/addresses_table.tsx
@@ -0,0 +1,42 @@
+import Address from "./address";
+
+export default function AddressesTable({ addresses }) {
+ const digested_addresses = addresses.map(address =>
+ <Address address={address}/>
+ );
+
+ return(
+ <div className="w-4/5 relative overflow-x-auto">
+ <h1 className="text-2xl my-2">
+ Direcciones de envío
+ </h1>
+ <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>
+ <th scope="col" className="px-6 py-3">
+ Calle
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Número
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Código postal
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Ciudad
+ </th>
+ <th scope="col" className="px-6 py-3">
+ País
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Editar
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ {digested_addresses}
+ </tbody>
+ </table>
+ </div>
+ );
+} \ No newline at end of file
diff --git a/src/components/payment_method.tsx b/src/components/payment_method.tsx
new file mode 100644
index 0000000..66f7e54
--- /dev/null
+++ b/src/components/payment_method.tsx
@@ -0,0 +1,23 @@
+export default function PaymentMethod({ payment_method }) {
+ return(
+ <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+ <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ {payment_method.attributes.number}
+ </th>
+ <td className="px-6 py-4">
+ {payment_method.attributes.expiration_day}
+ </td>
+ <td className="px-6 py-4">
+ {payment_method.attributes.expiration_month}
+ </td>
+ <td className="px-6 py-4">
+ {payment_method.attributes.expiration_year}
+ </td>
+ <td className="px-6 py-4">
+ <button 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">
+ Editar
+ </button>
+ </td>
+ </tr>
+ );
+} \ No newline at end of file
diff --git a/src/components/payment_methods_table.tsx b/src/components/payment_methods_table.tsx
new file mode 100644
index 0000000..e9ac639
--- /dev/null
+++ b/src/components/payment_methods_table.tsx
@@ -0,0 +1,40 @@
+import PaymentMethod from "./payment_method";
+import "./stylesheets/shared.css";
+
+export default function PaymentMethodsTable({ payment_methods }) {
+ const digested_payment_methods = payment_methods.map(payment_method =>
+ <PaymentMethod payment_method={payment_method}/>
+ );
+
+ return(
+ <div className="my-2 w-4/5 relative overflow-x-auto">
+ <h1 className="text-2xl my-2">
+ Métodos de pago
+ </h1>
+ <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>
+ <th scope="col" className="px-6 py-3">
+ Número
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Día de expiración
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Mes de expiración
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Año de expiración
+ </th>
+ <th scope="col" className="px-6 py-3">
+ Editar
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ {digested_payment_methods}
+ </tbody>
+ </table>
+ </div>
+ );
+} \ No newline at end of file
diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css
index 9bda368..cc9e4a2 100644
--- a/src/components/stylesheets/shared.css
+++ b/src/components/stylesheets/shared.css
@@ -6,6 +6,18 @@
left: 50%;
}
+h1 {
+ color: #394490;
+}
+
+.field_name {
+ color: #394490;
+}
+
+.bg-blue-arma {
+ background-color: #394490 !important;
+}
+
.button {
background-color: #394490 !important;
}