Mark Sinclair
c66d7ed489
* Use new eslint rules and apply fixes. Use new logo component and shared theme + webpack config. * Add shared component to display a copy icon and copy to clipboard with confirmation state * Organise imports * Add copy mixnode identity key to list of mixnodes and detail view * Update nvm node version to 16 * Update GitHub Actions for Network Explorer to use yarn and yarn workspaces * Switch favicon for smaller N icon * Update README * Add error boundary
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: React.FC<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,
|
|
};
|