import { GlobalStyles, PaperProps, styled } from '@mui/material'; import { BORDER_RADIUS, PANEL_BACKGROUND, TEXT, } from '../../lib/consts/DEFAULT_THEME'; const PREFIX = 'Panel'; const classes = { paper: `${PREFIX}-paper`, square: `${PREFIX}-square`, topSquare: `${PREFIX}-topSquare`, bottomSquare: `${PREFIX}-bottomSquare`, }; const StyledDiv = styled('div')(() => ({ margin: '1em', position: 'relative', [`& .${classes.paper}`]: { padding: '2.1em', backgroundColor: PANEL_BACKGROUND, opacity: 0.8, zIndex: 999, }, [`& .${classes.square}`]: { content: '""', position: 'absolute', width: '2.1em', height: '2.1em', border: '1px', borderColor: TEXT, borderWidth: '1px', borderRadius: BORDER_RADIUS, borderStyle: 'solid', padding: 0, margin: 0, }, [`& .${classes.topSquare}`]: { top: '-.3em', left: '-.3em', }, [`& .${classes.bottomSquare}`]: { bottom: '-.3em', right: '-.3em', }, })); type PanelProps = PaperProps; const styledScrollbars = ( ); const Panel = ({ children }: PanelProps): JSX.Element => ( {styledScrollbars}
{children}
); export default Panel;