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

6
app/javascript/src/components/Table/TableRow.tsx
View File

@@ -26,7 +26,11 @@ export const TableRow: FC<Props> = ({ items, id, onClick }) => {
> >
{items?.map((item, index) => ( {items?.map((item, index) => (
<td key={index} className="px-5 py-5 border-b border-gray-200 text-sm"> <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> </td>
))} ))}
</tr> </tr>

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

@@ -3,6 +3,7 @@ import type { FC } from "react";
import React from "react"; import React from "react";
import { useFragment } from "react-relay"; import { useFragment } from "react-relay";
import { Table, TableRow } from "../../components";
import { getCurrencyLogo } from "../../utils/getCurrencyLogo"; import { getCurrencyLogo } from "../../utils/getCurrencyLogo";
import type { Balance_balance$key } from "./__generated__/Balance_balance.graphql"; import type { Balance_balance$key } from "./__generated__/Balance_balance.graphql";
@@ -24,47 +25,25 @@ export const Balance: FC<Props> = ({ balancesRef }) => {
return ( return (
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto"> <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"> <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
<table className="min-w-full leading-normal"> <Table columns={["Moeda", "Saldo"]}>
<thead> <TableRow
<tr> items={[
<th <div className="flex items-center" key="pancake coin">
scope="col" <div className="flex-shrink-0">
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal" <img
> alt="CAKE icon"
Moeda src={getCurrencyLogo("CAKE")}
</th> className="mx-auto object-cover rounded-full h-10 w-10 "
<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>
</div> </div>
</td> <div className="ml-3">
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <p className="text-gray-900 whitespace-no-wrap">CAKE</p>
<p className="text-gray-900 whitespace-no-wrap"> </div>
{node.amount} </div>,
</p> node.amount,
</td> ]}
</tr> />
</tbody> </Table>
</table>
</div> </div>
</div> </div>
); );