You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1.7 KiB
85 lines
1.7 KiB
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 = ( |
|
<GlobalStyles |
|
styles={{ |
|
'*::-webkit-scrollbar': { |
|
width: '.6em', |
|
}, |
|
'*::-webkit-scrollbar-track': { |
|
backgroundColor: PANEL_BACKGROUND, |
|
}, |
|
'*::-webkit-scrollbar-thumb': { |
|
backgroundColor: TEXT, |
|
outline: '1px solid transparent', |
|
borderRadius: BORDER_RADIUS, |
|
}, |
|
}} |
|
/> |
|
); |
|
|
|
const Panel = ({ children }: PanelProps): JSX.Element => { |
|
return ( |
|
<StyledDiv> |
|
{styledScrollbars} |
|
<div className={`${classes.square} ${classes.topSquare}`} /> |
|
<div className={`${classes.square} ${classes.bottomSquare}`} /> |
|
<div className={classes.paper}>{children}</div> |
|
</StyledDiv> |
|
); |
|
}; |
|
|
|
export default Panel;
|
|
|