From 80bfdbe52884870b8cb7748861bf990cb6235959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Sat, 11 Sep 2021 12:14:54 -0300
Subject: [PATCH] improve table component

---
 .../src/components/Table/TableRow.tsx         |  6 +-
 app/javascript/src/pages/Wallet/Balance.tsx   | 59 ++++++-------------
 2 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/app/javascript/src/components/Table/TableRow.tsx b/app/javascript/src/components/Table/TableRow.tsx
index c549712..ffb3099 100644
--- a/app/javascript/src/components/Table/TableRow.tsx
+++ b/app/javascript/src/components/Table/TableRow.tsx
@@ -26,7 +26,11 @@ export const TableRow: FC<Props> = ({ items, id, onClick }) => {
     >
       {items?.map((item, index) => (
         <td key={index} className="px-5 py-5 border-b border-gray-200 text-sm">
-          <p className="text-gray-900 whitespace-nowrap">{item}</p>
+          {typeof item === "string" ? (
+            <p className="text-gray-900 whitespace-nowrap">{item}</p>
+          ) : (
+            item
+          )}
         </td>
       ))}
     </tr>
diff --git a/app/javascript/src/pages/Wallet/Balance.tsx b/app/javascript/src/pages/Wallet/Balance.tsx
index 9dd5f12..77c7a52 100644
--- a/app/javascript/src/pages/Wallet/Balance.tsx
+++ b/app/javascript/src/pages/Wallet/Balance.tsx
@@ -3,6 +3,7 @@ import type { FC } from "react";
 import React from "react";
 import { useFragment } from "react-relay";
 
+import { Table, TableRow } from "../../components";
 import { getCurrencyLogo } from "../../utils/getCurrencyLogo";
 import type { Balance_balance$key } from "./__generated__/Balance_balance.graphql";
 
@@ -24,47 +25,25 @@ export const Balance: FC<Props> = ({ balancesRef }) => {
   return (
     <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
       <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-        <table className="min-w-full leading-normal">
-          <thead>
-            <tr>
-              <th
-                scope="col"
-                className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-              >
-                Moeda
-              </th>
-              <th
-                scope="col"
-                className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-              >
-                Saldo
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                <div className="flex items-center">
-                  <div className="flex-shrink-0">
-                    <img
-                      alt="CAKE icon"
-                      src={getCurrencyLogo("CAKE")}
-                      className="mx-auto object-cover rounded-full h-10 w-10 "
-                    />
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-gray-900 whitespace-no-wrap">CAKE</p>
-                  </div>
+        <Table columns={["Moeda", "Saldo"]}>
+          <TableRow
+            items={[
+              <div className="flex items-center" key="pancake coin">
+                <div className="flex-shrink-0">
+                  <img
+                    alt="CAKE icon"
+                    src={getCurrencyLogo("CAKE")}
+                    className="mx-auto object-cover rounded-full h-10 w-10 "
+                  />
                 </div>
-              </td>
-              <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                <p className="text-gray-900 whitespace-no-wrap">
-                  {node.amount}
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <div className="ml-3">
+                  <p className="text-gray-900 whitespace-no-wrap">CAKE</p>
+                </div>
+              </div>,
+              node.amount,
+            ]}
+          />
+        </Table>
       </div>
     </div>
   );