-
-
Notifications
You must be signed in to change notification settings - Fork 656
/
Widget.tsx
42 lines (40 loc) · 1.43 KB
/
Widget.tsx
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
import { FC, ReactNode } from 'react';
import { Paper, Typography, styled, SxProps } from '@mui/material';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Theme } from '@mui/material/styles/createTheme';
import InfoOutlined from '@mui/icons-material/InfoOutlined';
const StyledPaper = styled(Paper)(({ theme }) => ({
padding: theme.spacing(3),
borderRadius: `${theme.shape.borderRadiusLarge}px`,
minWidth: 0, // bugfix, see: https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128
position: 'relative',
}));
export const Widget: FC<{
title: ReactNode;
tooltip?: ReactNode;
sx?: SxProps<Theme>;
}> = ({ title, children, tooltip, ...rest }) => (
<StyledPaper elevation={0} {...rest}>
<Typography
variant='h3'
sx={(theme) => ({
marginBottom: theme.spacing(3),
display: 'flex',
alignItems: 'center',
gap: theme.spacing(0.5),
})}
>
{title}
<ConditionallyRender
condition={Boolean(tooltip)}
show={
<HelpIcon htmlTooltip tooltip={tooltip}>
<InfoOutlined />
</HelpIcon>
}
/>
</Typography>
{children}
</StyledPaper>
);