Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import * as React from 'react';
|
|
import { CircularProgress, Typography } from '@mui/material';
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import TableRow from '@mui/material/TableRow';
|
|
import Paper from '@mui/material/Paper';
|
|
import CheckCircleSharpIcon from '@mui/icons-material/CheckCircleSharp';
|
|
import ErrorIcon from '@mui/icons-material/Error';
|
|
|
|
interface TableProps {
|
|
title?: string;
|
|
icons?: boolean[];
|
|
keys: string[];
|
|
values: number[];
|
|
marginBottom?: boolean;
|
|
error?: string;
|
|
loading: boolean;
|
|
}
|
|
|
|
export const TwoColSmallTable: FCWithChildren<TableProps> = ({
|
|
loading,
|
|
title,
|
|
icons,
|
|
keys,
|
|
values,
|
|
marginBottom,
|
|
error,
|
|
}) => (
|
|
<>
|
|
{title && <Typography sx={{ marginTop: 2 }}>{title}</Typography>}
|
|
|
|
<TableContainer component={Paper} sx={marginBottom ? { marginBottom: 4, marginTop: 2 } : { marginTop: 2 }}>
|
|
<Table aria-label="two col small table">
|
|
<TableBody>
|
|
{keys.map((each: string, i: number) => (
|
|
<TableRow key={each}>
|
|
{icons && <TableCell>{icons[i] ? <CheckCircleSharpIcon /> : <ErrorIcon />}</TableCell>}
|
|
<TableCell sx={error ? { opacity: 0.4 } : null} data-testid={each.replace(/ /g, '')}>
|
|
{each}
|
|
</TableCell>
|
|
<TableCell
|
|
sx={error ? { opacity: 0.4 } : null}
|
|
align="right"
|
|
data-testid={`${each.replace(/ /g, '-')}-value`}
|
|
>
|
|
{values[i]}
|
|
</TableCell>
|
|
{error && (
|
|
<TableCell align="right" sx={{ opacity: 0.4 }}>
|
|
{values[i]}
|
|
</TableCell>
|
|
)}
|
|
{!error && loading && (
|
|
<TableCell align="right">
|
|
<CircularProgress />
|
|
</TableCell>
|
|
)}
|
|
{error && !icons && (
|
|
<TableCell sx={{ opacity: 0.2 }} align="right">
|
|
<ErrorIcon />
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</>
|
|
);
|
|
|
|
TwoColSmallTable.defaultProps = {
|
|
title: undefined,
|
|
icons: undefined,
|
|
marginBottom: false,
|
|
error: undefined,
|
|
};
|