61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
|
|
import makeStyles from '@mui/styles/makeStyles';
|
|
import Stack from '@mui/material/Stack';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
light: {
|
|
backgroundColor: theme.palette.background.light1,
|
|
borderRadius: 5,
|
|
padding: '10px 15px 10px 15px!important',
|
|
wordWrap: 'break-word',
|
|
wordBreak: 'break-word',
|
|
overflowWrap: 'break-word',
|
|
},
|
|
dark: {
|
|
backgroundColor: theme.palette.background.dark2,
|
|
borderRadius: 5,
|
|
padding: '10px 15px 10px 15px!important',
|
|
wordWrap: 'break-word',
|
|
wordBreak: 'break-word',
|
|
overflowWrap: 'break-word',
|
|
},
|
|
success: {
|
|
color: theme.palette.background.paper,
|
|
fontWeight: 500,
|
|
backgroundColor: theme.palette.secondary.main,
|
|
borderRadius: 5,
|
|
padding: '10px 15px 10px 15px!important',
|
|
wordWrap: 'break-word',
|
|
wordBreak: 'break-word',
|
|
overflowWrap: 'break-word',
|
|
},
|
|
danger: {
|
|
backgroundColor: theme.palette.error.main,
|
|
textAlign: 'center',
|
|
borderRadius: 4,
|
|
padding: '.5em .5em .3em .5em',
|
|
wordWrap: 'break-word',
|
|
wordBreak: 'break-word',
|
|
overflowWrap: 'break-word',
|
|
},
|
|
}));
|
|
|
|
export default function Component({ color = 'light', textAlign = 'left', alignItems = 'center', justifyContent = 'center', style = null, children = null }) {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<Stack
|
|
direction="column"
|
|
justifyContent={justifyContent}
|
|
alignItems={alignItems}
|
|
textAlign={textAlign}
|
|
spacing={1}
|
|
className={color === 'dark' ? classes.dark : color === 'success' ? classes.success : color === 'danger' ? classes.danger : classes.light}
|
|
style={style}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
}
|