geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve table component

Browse Source
This commit is contained in:
João Geonizeli
2021-09-11 12:14:54 -03:00
parent a61a36a5bf
commit 80bfdbe528
2 changed files with 24 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/javascript/src/pages/Wallet/Balance.tsx
View File

@@ -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>
);