improve table component

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">
+          {typeof item === "string" ? (
             <p className="text-gray-900 whitespace-nowrap">{item}</p>
+          ) : (
+            item
+          )}
         </td>
       ))}
     </tr>

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,27 +25,10 @@ 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">
+        <Table columns={["Moeda", "Saldo"]}>
+          <TableRow
+            items={[
+              <div className="flex items-center" key="pancake coin">
                 <div className="flex-shrink-0">
                   <img
                     alt="CAKE icon"
@@ -55,16 +39,11 @@ export const Balance: FC<Props> = ({ balancesRef }) => {
                 <div className="ml-3">
                   <p className="text-gray-900 whitespace-no-wrap">CAKE</p>
                 </div>
-                </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>,
+              node.amount,
+            ]}
+          />
+        </Table>
       </div>
     </div>
   );