Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import { Info } from '@mui/icons-material';
import { Box, IconButton, SxProps, Typography, useTheme } from '@mui/material';
import React, { useMemo } from 'react';
export interface Props {
id?: string;
title: string;
value: number | string;
variant?: 'default' | 'available' | 'zero' | 'full';
icon?: boolean;
onIconClick?: () => void;
}
export default function SummaryBox({ title, value, variant = 'default', id, icon, onIconClick }: Props): JSX.Element {
const theme = useTheme();
const summaryBoxStyles: SxProps = useMemo(() => {
switch (variant) {
case 'default':
return {
position: 'relative',
borderRadius: 8,
backgroundColor: theme.palette.neutral[200],
padding: theme.spacing(2),
};
case 'available':
return {
borderRadius: 8,
backgroundColor: theme.palette.neutral[700],
padding: theme.spacing(2),
color: theme.palette.common.white,
};
case 'full':
return {
borderRadius: 8,
backgroundColor: theme.palette.neutral[200],
padding: theme.spacing(2),
height: '100%',
boxSizing: 'border-box',
};
default:
return {
borderRadius: 8,
backgroundColor: theme.palette.state[5],
padding: theme.spacing(2),
color: theme.palette.common.white,
};
}
}, [theme, variant]);
return (
<Box id={id} sx={summaryBoxStyles}>
{icon && (
<IconButton onClick={onIconClick} sx={{ position: 'absolute', right: theme.spacing(2) }}>
<Info />
</IconButton>
)}
<Typography component='p'>{title}</Typography>
<Typography
component='p'
variant='h6'
sx={{
fontWeight: theme.typography.fontWeightBold,
whiteSpace: 'pre-line',
}}
>
{value}
</Typography>
</Box>
);
}
|