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>
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import * as React from 'react'
|
|
import { Box, Card, CardContent, IconButton, Typography } from '@mui/material'
|
|
import { useTheme } from '@mui/material/styles'
|
|
import EastIcon from '@mui/icons-material/East'
|
|
|
|
interface StatsCardProps {
|
|
icon: React.ReactNode
|
|
title: string
|
|
count?: string | number
|
|
errorMsg?: Error | string
|
|
onClick?: () => void
|
|
color?: string
|
|
}
|
|
export const StatsCard: FCWithChildren<StatsCardProps> = ({
|
|
icon,
|
|
title,
|
|
count,
|
|
onClick,
|
|
errorMsg,
|
|
color: colorProp,
|
|
}) => {
|
|
const theme = useTheme()
|
|
const color = colorProp || theme.palette.text.primary
|
|
return (
|
|
<Card onClick={onClick} sx={{ height: '100%' }}>
|
|
<CardContent
|
|
sx={{
|
|
padding: 1.5,
|
|
paddingLeft: 3,
|
|
'&:last-child': {
|
|
paddingBottom: 1.5,
|
|
},
|
|
cursor: 'pointer',
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
<Box display="flex" alignItems="center" color={color}>
|
|
<Box display="flex">
|
|
{icon}
|
|
<Typography
|
|
ml={3}
|
|
mr={0.75}
|
|
fontSize="inherit"
|
|
fontWeight="inherit"
|
|
data-testid={`${title}-amount`}
|
|
>
|
|
{count === undefined || count === null ? '' : count}
|
|
</Typography>
|
|
<Typography
|
|
mr={1}
|
|
fontSize="inherit"
|
|
fontWeight="inherit"
|
|
data-testid={title}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
<IconButton color="inherit" sx={{ fontSize: '16px' }}>
|
|
<EastIcon fontSize="inherit" />
|
|
</IconButton>
|
|
</Box>
|
|
{errorMsg && (
|
|
<Typography variant="body2" sx={{ color: 'danger', padding: 2 }}>
|
|
{typeof errorMsg === 'string'
|
|
? errorMsg
|
|
: errorMsg.message || 'Oh no! An error occurred'}
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|